/* ============================================================
   Sofitel Paris Le Faubourg — Design Tokens
   Source: sofitel-paris-lefaubourg.com/css/custom.css
   Fonts: Romie (display) → Playfair Display · GT America LV (body) → DM Sans
   Gold: #A98524 · Dark: #000 · White: #fff
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root {
  /* ---------- BRAND CORE (Sofitel Le Faubourg) ---------- */
  --accor-dark:    #1a1818;   /* primary — wordmark, headlines, deep surfaces */
  --accor-deep:    #0d0c0c;   /* deepest dark surface */
  --accor-mid:     #2c2420;   /* mid-dark panels / gradient stop */
  --gold:          #A98524;   /* Sofitel primary gold — olive-gold */
  --gold-600:      #8F711E;   /* dark gold — hover / pressed */
  --gold-800:      #6b5116;   /* deep gold anchor */
  --gold-light:    #C8A84C;   /* warm highlight — lighter gold */
  --gold-mist:     #f5f0e6;   /* faintest champagne wash */

  /* ---------- SECONDARY & STATUS ---------- */
  --emerald:       #2e7d3c;
  --emerald-600:   #1f5c2a;
  --emerald-bg:    #e6f4e9;
  --emerald-fg:    #1a5526;
  --rose:          #b84040;
  --rose-bg:       #fce9e9;
  --rose-fg:       #8a2c2c;
  --amber:         #c87820;
  --amber-bg:      #fdf3e0;
  --amber-fg:      #8b5500;
  --sapphire:      #3a68b4;
  --sapphire-bg:   #e8eef9;

  /* ---------- TINTS & SURFACES ---------- */
  --gold-tint:     #f5f0e6;   /* champagne card wash */
  --gold-stage:    #1a1410;   /* dark gold-tinted stage */
  --warm-mist:     #f0ece4;

  --surface-0:     #ffffff;
  --surface-1:     #fafaf8;   /* near-white page base */
  --surface-2:     #f2ede5;   /* subtle warm section */
  --surface-glass: rgba(255,255,253,0.82);

  /* ---------- INK (TEXT) ---------- */
  --ink:           #1a1818;   /* primary text — near-black */
  --ink-soft:      #3d3530;   /* secondary text */
  --ink-muted:     #746C6B;   /* tertiary / captions — Sofitel grey */
  --ink-faint:     #a8a09a;   /* disabled / placeholder */
  --ink-line:      #e8e2d8;   /* hairline borders */
  --ink-on-dark:   #f0ece4;   /* text on dark surfaces */

  /* ---------- SEMANTIC STATUS ---------- */
  --success:       #2e7d3c;
  --success-bg:    #e6f4e9;
  --success-fg:    #1a5526;
  --warning:       #c87820;
  --warning-bg:    #fdf3e0;
  --warning-fg:    #8b5500;
  --danger:        #b84040;
  --danger-bg:     #fce9e9;
  --danger-fg:     #8a2c2c;
  --info:          #3a68b4;
  --info-bg:       #e8eef9;
  --info-fg:       #2a4e8c;

  /* ---------- GRADIENTS (minimal — prefer solids) ---------- */
  --grad-brand:      #1a1818;
  --grad-brand-soft: #2c2420;
  --grad-gold:       #A98524;
  --grad-emerald:    #2e7d3c;
  --grad-page:       #fafaf8;
  --grad-hero:       transparent;

  /* ---------- TYPE ---------- */
  --font-sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", "Garamond", "Georgia", serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display: 64px;
  --fs-h1:      44px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-title:   20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-2xs:     11px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.62;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.012em;
  --tracking-caps:    0.14em;

  /* ---------- RADII ---------- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---------- SPACING ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:    0 1px 2px rgba(26,24,24,0.06);
  --shadow-soft:  0 6px 24px rgba(26,24,24,0.08), 0 1px 2px rgba(26,24,24,0.04);
  --shadow-card:  0 12px 40px rgba(26,24,24,0.10), 0 2px 6px rgba(26,24,24,0.05);
  --shadow-lift:  0 24px 70px rgba(26,24,24,0.15), 0 4px 12px rgba(26,24,24,0.07);
  --shadow-glow:  0 18px 60px rgba(169,133,36,0.28);
  --shadow-glow-gold: 0 16px 50px rgba(169,133,36,0.24);
  --shadow-glass: 0 24px 80px rgba(26,24,24,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  --ring-focus:   0 0 0 3px rgba(169,133,36,0.32);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
}

/* ============================================================ SEMANTIC ELEMENTS */

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--accor-dark);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
h2, .h2 { font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--ink); }
h3, .h3 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); }
.title  { font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-snug); color: var(--ink); }
p, .body { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--ink-soft); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-soft); }
.caption { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ink-muted); }
.eyebrow, .label-caps {
  font-size: var(--fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-muted);
}
code, .mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
a { color: var(--gold-600); text-decoration: none; }
a:hover { color: var(--gold-800); }