/* Brand tokens (white-label layer). Every color, radius and font in the demo comes from here. Switching data-brand on re-skins the whole product: palette, typography AND geometry. */ :root { --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: Georgia, "Times New Roman", serif; --font-body: var(--font-ui); /* Semantic status colors are shared across brands (never reused as series colors). */ --c-success: #2F7A4F; --c-success-soft: #E3F0E7; --c-warning: #9A6412; --c-warning-soft: #F8EDD9; --c-danger: #B23A2E; --c-danger-soft: #F6E1DE; --c-info: #2F5E7A; --c-info-soft: #E1ECF2; --shadow-1: 0 1px 2px rgba(20, 18, 17, .06), 0 2px 10px rgba(20, 18, 17, .06); --shadow-2: 0 10px 34px rgba(20, 18, 17, .14); --shadow-3: 0 24px 60px -18px rgba(20, 18, 17, .35); --ease-out: cubic-bezier(.22, .8, .3, 1); --ease-spring: cubic-bezier(.2, .9, .25, 1.15); --motif-dark: none; --motif-light: none; } /* ─── L'Appartement: Parisian apartment — linen, taupe, clay; sharp geometry, moulding lines ─── */ [data-brand="lappartement"] { --c-bg: #FFFFFF; --c-surface: #F6F2ED; --c-surface-2: #EDE6DE; --c-elevated: #FFFFFF; --c-ink: #141211; --c-ink-2: #5F5955; --c-muted: #776E68; --c-line: #E7E0D8; --c-line-strong: #CFC6BC; --c-primary: #141211; --c-primary-hover: #34302D; --c-on-primary: #FFFFFF; --c-accent: #8E6147; --c-on-accent: #FFFFFF; --c-accent-soft: #F3EAE2; --c-secondary: #7C8A70; --c-secondary-soft: #ECEFE8; --tier-standard: #E4DCD2; --tier-standard-ink: #141211; --tier-gold: #C9AB7C; --tier-gold-ink: #1A1510; --tier-platinum: #262422; --tier-platinum-ink: #EEE8E1; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Jost", system-ui, "Segoe UI", sans-serif; --display-weight: 500; --display-tracking: 0; --label-tracking: .16em; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0; --r-btn: 0; --r-card: 0; --r-chip: 0; --r-hero: 0; --btn-size: 12.5px; --btn-weight: 500; --btn-tracking: .14em; --btn-case: uppercase; --stage-bg: #151312; --stage-panel: #211E1C; --stage-line: rgba(255, 255, 255, .08); --stage-ink: #F3EEE8; --stage-ink-2: #C9C0B7; --stage-muted: #8F867E; --stage-accent: #D2B48C; } /* ─── Hamam: marble, copper, jade; arches and soft stone geometry, "fil gözü" dome motif ─── */ [data-brand="hamam"] { --c-bg: #F5F1EA; --c-surface: #FFFFFF; --c-surface-2: #ECE5DA; --c-elevated: #FFFFFF; --c-ink: #1C2A29; --c-ink-2: #465654; --c-muted: #5E6C69; --c-line: #E4DBCF; --c-line-strong: #CDBFAE; --c-primary: #A65A2A; --c-primary-hover: #8C4A21; --c-on-primary: #FFFFFF; --c-accent: #2E6B5F; --c-on-accent: #FFFFFF; --c-accent-soft: #DCE9E4; --c-secondary: #B08A55; --c-secondary-soft: #F2E8D8; --tier-standard: #E2D8CA; --tier-standard-ink: #1C2A29; --tier-gold: #C99A4B; --tier-gold-ink: #1E1609; --tier-platinum: #1C2A29; --tier-platinum-ink: #EBDDC6; --font-display: "Marcellus", "Trajan Pro", Georgia, serif; --font-body: "Manrope", system-ui, "Segoe UI", sans-serif; --display-weight: 400; --display-tracking: .01em; --label-tracking: .1em; --r-xs: 6px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; --r-btn: 999px; --r-card: 22px; --r-chip: 999px; --r-hero: 190px 190px 24px 24px / 150px 150px 24px 24px; /* hamam arch */ --btn-size: 14.5px; --btn-weight: 700; --btn-tracking: .01em; --btn-case: none; --stage-bg: #111C1B; --stage-panel: #1B2928; --stage-line: rgba(255, 255, 255, .08); --stage-ink: #F2ECE2; --stage-ink-2: #C4CBC7; --stage-muted: #82918D; --stage-accent: #D08A55; }