/* ==========================================================================
   TOKENS — the single source of truth.
   Nothing in this theme uses a hand-picked value. Every color, size, space,
   duration and radius resolves to a token declared here.
   Warm luxury neutral: bone ground, ink type, single brass accent.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     1. COLOR — ramps, then semantic roles.
     Figure/ground (Gestalt): the page ground is bone, surfaces are white
     or sand. Content always sits on a lighter plane than the ground it
     rests on, so panels read as figure without needing heavy borders.
     --------------------------------------------------------------------- */

  /* Neutral ramp — warm-biased greys, hue ~35deg */
  --bone-050: #FDFBF7;
  --bone-100: #FAF6EF;
  --bone-200: #F3EDE3;
  --bone-300: #E8DFD1;
  --bone-400: #D6CAB6;
  --bone-500: #B6A891;

  --ink-900: #14120F;
  --ink-800: #201D18;
  --ink-700: #332E26;
  --ink-600: #4A4339;
  --ink-500: #6B6357;
  --ink-400: #8C8375;

  /* Accent ramp — brass. Reserved. See --color-accent role below. */
  --brass-700: #6E5322;
  --brass-600: #8A6A2E;
  --brass-500: #A6813C;
  --brass-400: #C4A265;
  --brass-300: #E4D2AE;
  --brass-200: #EFE5D2;
  --brass-100: #F7F1E5;

  /* Semantic roles — templates reference ONLY these. */
  --color-ground:        var(--bone-100);   /* page background            */
  --color-ground-alt:    var(--bone-200);   /* alternating section band   */
  --color-surface:       #FFFFFF;           /* cards, panels              */
  --color-surface-sunk:  var(--bone-050);   /* inset wells, inputs        */
  --color-inverse:       var(--ink-900);    /* dark bands, footer         */
  --color-inverse-soft:  var(--ink-800);

  --color-text:          var(--ink-800);    /* body copy                  */
  --color-text-strong:   var(--ink-900);    /* headings                   */
  --color-text-muted:    var(--ink-500);    /* captions, meta             */
  --color-text-faint:    var(--ink-400);    /* eyebrows on light          */
  --color-text-on-dark:  var(--bone-100);
  --color-text-on-dark-muted: var(--bone-400);

  --color-accent:        var(--brass-500);  /* the ONE focal color        */
  --color-accent-strong: var(--brass-700);  /* accent as readable text    */
  --color-accent-soft:   var(--brass-100);  /* accent-tinted fills        */

  --color-line:          var(--bone-300);   /* hairlines, common region   */
  --color-line-strong:   var(--bone-400);
  --color-line-on-dark:  rgba(250, 246, 239, .18);

  --color-focus:         var(--brass-600);

  /* ---------------------------------------------------------------------
     2. TYPE
     Two families only. Display serif carries voice; UI sans carries
     information. Similarity (Gestalt): every element of the same rank
     uses the same family + weight + tracking, everywhere on the site.
     --------------------------------------------------------------------- */

  /* Gotham is the @properties house face (Hoefler & Co, licensed via
     cloud.typography.com). If Mikel's brokerage license is loaded on the site,
     "Gotham A"/"Gotham B" resolve first and the whole site picks it up with no
     other change. Montserrat is the free stand-in with the same geometric
     skeleton — it is what the fallback renders until that license is in place. */
  --font-display: "Gotham A", "Gotham B", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui: "Gotham A", "Gotham B", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Fluid modular scale. A geometric sans carries far more visual weight than
     a serif at the same size, so the display end of the scale is pulled down
     roughly a step from where a serif would sit. */
  --fs-2xs:  clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --fs-xs:   clamp(0.75rem,  0.73rem + 0.11vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --fs-base: clamp(1rem,     0.97rem + 0.16vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1.03rem + 0.19vw, 1.1875rem);
  --fs-lg:   clamp(1.25rem,  1.19rem + 0.31vw, 1.4375rem);
  --fs-xl:   clamp(1.5rem,   1.39rem + 0.56vw, 1.875rem);
  --fs-2xl:  clamp(1.875rem, 1.66rem + 1.06vw, 2.625rem);
  --fs-3xl:  clamp(2.25rem,  1.89rem + 1.81vw, 3.5rem);
  --fs-4xl:  clamp(2.5rem,   1.86rem + 3.19vw, 4.5rem);

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.7;

  /* Geometric sans wants NEGATIVE tracking only at display sizes, and
     generous POSITIVE tracking in uppercase. Matches how Gotham is set. */
  --ls-tightest: -0.022em;
  --ls-tight:    -0.012em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-widest:   0.16em;

  /* @properties maps "bold" to 500 — the house style is light and even, never
     heavy. The same mapping is used here so nothing renders chunky. */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 500;

  --measure: 66ch;        /* optimal reading width */
  --measure-tight: 46ch;  /* lede paragraphs, card copy */

  /* ---------------------------------------------------------------------
     3. SPACE — 4px base, non-linear at the top.
     Proximity (Gestalt): the gap between two elements encodes their
     relationship. Within a group ≤ space-3. Between groups ≥ space-6.
     Between sections = space-section.
     --------------------------------------------------------------------- */

  --space-0: 0;
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 10rem;    /* 160 */

  --space-section: clamp(var(--space-8), 4vw + 2rem, var(--space-10));
  --space-section-lg: clamp(var(--space-9), 6vw + 2rem, var(--space-11));

  /* ---------------------------------------------------------------------
     4. GRID — 12 columns, one shared left edge everywhere.
     Continuity (Gestalt): every section aligns to this grid so the eye
     tracks an unbroken vertical line down the whole page.
     --------------------------------------------------------------------- */

  --grid-columns: 12;
  --grid-max: 78rem;        /* 1248px content field */
  --grid-max-wide: 90rem;   /* 1440px full-bleed media field */
  --grid-gutter: clamp(var(--space-5), 3vw, var(--space-6));
  --grid-pad: clamp(var(--space-5), 5vw, var(--space-8));

  /* ---------------------------------------------------------------------
     5. SHAPE + DEPTH
     Common region (Gestalt): a card is defined by surface + hairline,
     never by a drop shadow alone. Shadows are for lift on interaction.
     --------------------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  --border-hair: 1px solid var(--color-line);
  --border-hair-strong: 1px solid var(--color-line-strong);
  --border-hair-dark: 1px solid var(--color-line-on-dark);

  --shadow-rest: 0 1px 2px rgba(20, 18, 15, .04);
  --shadow-lift: 0 12px 32px -12px rgba(20, 18, 15, .16), 0 2px 6px rgba(20, 18, 15, .04);
  --shadow-focus: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);

  /* ---------------------------------------------------------------------
     6. MOTION
     Common fate (Gestalt): elements that belong to one group enter
     together, on the same curve, staggered by --motion-stagger only.
     --------------------------------------------------------------------- */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;
  --motion-stagger: 90ms;

  /* ---------------------------------------------------------------------
     7. LAYERS
     --------------------------------------------------------------------- */

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* ---------------------------------------------------------------------
     8. COMPONENT-LEVEL TOKENS (derived, never re-picked)
     --------------------------------------------------------------------- */

  --header-height: 5rem;
  --header-height-scrolled: 4rem;
  --control-height: 3rem;
  --control-height-sm: 2.5rem;
  --tap-target: 44px;         /* WCAG 2.5.5 (AAA) — the target to design to  */
  --tap-target-min: 24px;     /* WCAG 2.5.8 (AA)  — the floor nothing goes under */

  --ratio-portrait: 4 / 5;
  --ratio-square: 1 / 1;
  --ratio-landscape: 3 / 2;
  --ratio-wide: 16 / 9;
  --ratio-hero: 4 / 5;
  --ratio-hero-desktop: 16 / 10;
}

/* --------------------------------------------------------------------------
   Inverse context. Any block that flips to the dark plane sets this class and
   every semantic role re-points — templates never special-case their colors.
   -------------------------------------------------------------------------- */
.is-inverse {
  --color-ground: var(--ink-900);
  --color-ground-alt: var(--ink-800);
  --color-surface: var(--ink-800);
  --color-surface-sunk: var(--ink-900);
  --color-text: var(--color-text-on-dark);
  --color-text-strong: #FFFFFF;
  --color-text-muted: var(--bone-400);
  --color-text-faint: var(--bone-500);
  --color-accent-strong: var(--brass-400);
  --color-line: var(--color-line-on-dark);
  --color-line-strong: rgba(250, 246, 239, .3);
  --shadow-focus: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--brass-400);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --motion-stagger: 0ms;
  }
}