/* ─── Design Tokens — Luxury Atelier ────────────────────────────
   Every color, spacing, radius, and typographic value used on any
   page must reference one of these. No magic numbers in page CSS. */

:root {

  /* ── Core palette ── */
  --color-noir:      #1A1410;   /* Atelier Noir — primary text, dark surfaces */
  --color-espresso:  #2E2419;   /* Espresso — secondary dark, nav hover */
  --color-suede:     #6B5F50;   /* Suede — muted body text */
  --color-warm-grey: #9A8C7A;   /* Warm Grey — placeholder, hint text */
  --color-linen:     #E5DFD5;   /* Linen — borders, dividers */
  --color-parchment: #F5EDD8;   /* Parchment — section backgrounds, tints */
  --color-canvas:    #FAF7F2;   /* Ivory Canvas — page background */
  --color-surface:   #FFFFFF;   /* White — card surfaces */

  /* ── Gold system ── */
  --color-gold:       #C9A96E;   /* Gold Thread — primary accent, all CTAs */
  --color-gold-dark:  #9A7140;   /* Burnished — gold on dark backgrounds, hover */
  --color-gold-light: #E8D9C0;   /* Gilt — very subtle gold tint for hover states */
  --color-gold-dim:   rgba(201,169,110,0.15); /* Gold wash — translucent overlays */

  /* ── Semantic aliases ── */
  --color-bg:          var(--color-canvas);
  --color-text:        var(--color-noir);
  --color-text-muted:  var(--color-suede);
  --color-disabled:    var(--color-warm-grey);
  --color-border:      var(--color-linen);
  --color-accent:      var(--color-gold);
  --color-accent-dark: var(--color-gold-dark);

  /* ── Inverted surface (dark sections) ── */
  --color-dark-bg:      var(--color-noir);
  --color-dark-surface: var(--color-espresso);
  --color-dark-text:    var(--color-parchment);
  --color-dark-muted:   var(--color-warm-grey);
  --color-dark-border:  rgba(229,223,213,0.12);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  --text-xs:   0.6875rem;   /* 11px — captions, legal */
  --text-sm:   0.8125rem;   /* 13px — nav items, small labels */
  --text-base: 1rem;        /* 16px — body copy */
  --text-lg:   1.125rem;    /* 18px — large body */
  --text-xl:   1.375rem;    /* 22px — subheadings */
  --text-2xl:  1.75rem;     /* 28px — section intros */
  --text-3xl:  2.25rem;     /* 36px — H2 */
  --text-4xl:  3rem;        /* 48px — H1 */
  --text-5xl:  4rem;        /* 64px — display */
  --text-6xl:  5.5rem;      /* 88px — hero display */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-widest: 0.18em;  /* eyebrows, small caps labels */

  --weight-regular:  400;
  --weight-semibold: 600;

  /* ── Spacing ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  --section-padding:    var(--space-24);   /* standard section top/bottom */
  --section-padding-lg: var(--space-32);   /* hero and vision sections */
  --max-width:          1200px;
  --content-width:      720px;             /* prose columns */

  /* ── Radius & Border ── */
  --radius-none: 0px;     /* buttons, sharp elements — luxury uses square corners */
  --radius-sm:   2px;     /* micro — image corners */
  --radius-md:   4px;     /* cards, inputs */
  --radius-lg:   8px;     /* modals, large cards */
  --radius-pill: 999px;   /* badges only */

  --border-thin: 0.5px solid var(--color-border);
  --border-base: 1px solid var(--color-border);
  --border-gold: 1px solid var(--color-gold);
  --border-dark: 0.5px solid var(--color-dark-border);

  /* ── Elevation ── */
  --shadow-none: none;
  --shadow-sm:   0 1px 4px rgba(26,20,16,0.06);
  --shadow-md:   0 4px 20px rgba(26,20,16,0.09);
  --shadow-lg:   0 12px 48px rgba(26,20,16,0.12);
  --shadow-gold: 0 0 0 3px rgba(201,169,110,0.25);

  /* ── Layout ── */
  --nav-h:      68px;
  --nav-h-mobile: 56px;
  --transition: 0.2s ease;
}

@media (max-width: 768px) {
  :root { --nav-h: var(--nav-h-mobile); }
}