/* ============================================================
   Autumn Air — Design Tokens
   Dark luxury. Charcoal base, copper accent, gold highlight.
   ============================================================ */

:root {
  /* ---- Surfaces (charcoal ramp) ---- */
  --ink-900: #141312;   /* page background, warm near-black */
  --ink-850: #1A1916;   /* deepest section / mark fill */
  --ink-800: #1E1E1E;   /* charcoal — primary dark surface */
  --ink-750: #242322;
  --ink-700: #2B2B2B;   /* deep gray — elevated surface */
  --ink-650: #34322F;
  --ink-600: #3A3733;   /* hairline borders on dark */
  --ink-500: #4A463F;

  /* ---- Light surface ---- */
  --paper:      #F7F5F2; /* warm white */
  --paper-2:    #EFEBE4; /* slightly toned warm white */
  --paper-dim:  #D9D4CB; /* body text on dark (~9:1 on charcoal) */
  --paper-mute: #A8A199; /* secondary/label text on dark */

  /* ---- Text on light ---- */
  --ink-on-light:  #1E1E1E;
  --mute-on-light: #5C564E;
  --line-on-light: #E0DAD0;

  /* ---- Brand accents ---- */
  --copper:        #B87333;
  --copper-bright: #CE8A45;
  --copper-deep:   #8F571F;
  --gold:          #D4AF37;
  --gold-soft:     #E2C667;

  /* Accessible button coppers: white text passes 4.5:1 on these */
  --copper-btn:       #9F5D27; /* white text ≈ 5.3:1 */
  --copper-btn-hover: #8C4F1E; /* white text ≈ 6.5:1 */
  /* Form control boundary, ≥3:1 against the field interior (1.4.11) */
  --field-border:     #6A655B;

  /* ---- Tints / glows ---- */
  --copper-12: rgba(184, 115, 51, 0.12);
  --copper-18: rgba(184, 115, 51, 0.18);
  --copper-28: rgba(184, 115, 51, 0.28);
  --gold-14:   rgba(212, 175, 55, 0.14);

  /* ---- Semantic ---- */
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --border: var(--ink-600);
  --text: var(--paper);
  --text-body: var(--paper-dim);
  --text-mute: var(--paper-mute);
  --accent: var(--copper);

  /* ---- Typography ---- */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --text-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --text-2xl:  clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --text-3xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem);
  --text-hero: clamp(2.5rem, 1.7rem + 3.8vw, 5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-body: 1.65;

  --tracking-display: 0.015em;
  --tracking-label: 0.18em;
  --tracking-wide: 0.28em;

  /* ---- Spacing / rhythm ---- */
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --space-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 0.8rem + 2.5vw, 2.5rem);

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-copper: 0 18px 50px rgba(184, 115, 51, 0.28);

  /* ---- Motion ---- */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-menu: 300;
  --z-toast: 400;
}