/* ============================================================================
   TOKENS — the single source of truth for colour, type, space and motion.

   WHY THIS FILE EXISTS
   The site shipped seven parallel design vocabularies (style.css,
   stampede-ds.css, three generations of listings CSS, vow.css, landing.css, the
   pg-* scaffold, admin.css) plus 719 inline <style> blocks. They did not
   disagree about VALUES so much as about NAMES: --gold is the gold used for
   TEXT while --sds-gold is the gold used for FILLS, so the same identifier
   means opposite things depending on which stylesheet you are reading. That is
   how one button kept its WhatsApp green through four separate edits.

   So the tokens below are named for their ROLE, not their appearance, and every
   older name is aliased to one of them. Aliasing rather than rewriting is
   deliberate: it changes no markup, moves no pixels, and lets each system
   migrate at its own pace behind a name that now means one thing.

   HOW IT REACHES THE PAGES
   Not by a <link> on 876 pages. scripts/sync-tokens.js copies the block below
   into css/style.css and css/landing.css between markers — those two are the
   only root stylesheets, covering 775 and 102 pages respectively, and every
   other sheet co-loads with one of them. preflight fails if the copies drift,
   which is the same guarantee ensure-reca-line.js gives the compliance blocks.

   THEMES
   :root is the DARK palette and [data-theme="light"] overrides it, because that
   is the structure style.css already had and the site sets data-theme="light"
   before first paint. Do not invert it.
   ============================================================================ */

/* tokens:start — generated into style.css and landing.css by scripts/sync-tokens.js */

/* ── Metric-matched fallbacks ─────────────────────────────────────────────
   The webfonts load asynchronously (media="print" onload), which keeps them off
   the critical path but means the page paints in a fallback and then reflows
   when the real face arrives. Measured on production under Lighthouse's desktop
   throttle: CLS 0.0374, the largest shift at 235ms across .sds-hero__copy,
   .market-snapshot and .nav-links, with fonts not ready until 311ms. Unthrottled
   the fonts land in 127ms and it is invisible, which is why it never showed up
   locally. CLS is a Core Web Vitals ranking factor and desktop visitors see it.

   The cause is that the fallbacks are the wrong size. Measured at 100px over a
   representative string:
       Cormorant Garamond  2494.6px wide, 121px line box
       Georgia             2907.7px wide, 114px line box   (16.6% wider)
       Inter               3104.2px wide, 121px line box
       system-ui           2758.4px wide, 118px line box   (12.5% narrower)
   So the headline is set too wide, then snaps narrower — sometimes changing
   line count, which is what moves everything below it.

   These faces re-serve the LOCAL fallback at a corrected size, so the first
   paint already occupies the space the webfont will want. size-adjust fixes the
   advance width; the ascent/descent overrides restore the line box that
   size-adjust would otherwise shrink. Nothing is downloaded — src is local()
   only, and if the local face is absent the stack falls through as before.
   ──────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 88.56%;
  ascent-override: 110.24%;
  descent-override: 26.35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Segoe UI'), local('Roboto');
  size-adjust: 105.57%;
  ascent-override: 92.0%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}

:root {
  /* ── Brand gold, split by ROLE ────────────────────────────────────────────
     Two golds, because one cannot do both jobs. --t-gold-fill is a rich gold
     for surfaces a dark ink sits on. --t-gold-ink is gold used AS text, which
     on a light ground has to be much darker to clear 4.5:1 — #c79a3b as text on
     cream is 2.6:1 and fails. Reach for -ink whenever the gold is the letters. */
  --t-gold-fill:   #d4af37;
  --t-gold-ink:    #d4af37;
  --t-gold-soft:   rgba(212,175,55,0.12);
  --t-gold-line:   rgba(212,175,55,0.30);
  --t-gold-fill-hover: #e2c06e;   /* primary button hover: one step lighter */

  /* ── Secondary button: a quiet surface and a gold hairline ── */
  --t-btn2-bg:     transparent;
  --t-btn2-line:   var(--t-gold-line);

  /* ── Surfaces ── */
  --t-canvas:      #0a0a0a;
  --t-surface-1:   #141414;
  --t-surface-2:   #1d1d20;
  --t-surface-3:   #28282c;
  --t-navy:        #1a2645;

  /* ── Ink ── */
  --t-ink:         #f5f5f5;
  --t-ink-2:       #c8c8c8;
  --t-ink-3:       #a0a0a0;
  --t-ink-4:       #8a8a8a;
  --t-line:        rgba(255,255,255,0.16);

  /* ── Status ── */
  --t-ok:          #16a34a;
  --t-warn:        #d9b855;
  --t-crit:        #e08a78;

  /* ── Type ──
     Two faces, three roles. The serif carries display; the sans carries body
     and UI. Anything claiming a third face is drift. */
  --t-font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --t-font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A 1.25 scale. Display sizes are fluid so they never need a media query. */
  --t-size-xs:   0.78rem;
  --t-size-sm:   0.875rem;
  --t-size-base: 1rem;
  --t-size-md:   1.125rem;
  --t-size-lg:   clamp(1.25rem, 2.2vw, 1.5rem);
  --t-size-xl:   clamp(1.5rem, 3.2vw, 1.95rem);
  --t-size-2xl:  clamp(1.9rem, 4.4vw, 2.6rem);
  --t-size-3xl:  clamp(2.4rem, 6vw, 3.4rem);
  --t-leading-tight: 1.15;
  --t-leading-body:  1.65;

  /* ── Space — a 4px grid ── */
  --t-space-1: 4px;   --t-space-2: 8px;   --t-space-3: 12px;
  --t-space-4: 16px;  --t-space-5: 24px;  --t-space-6: 32px;
  --t-space-7: 48px;  --t-space-8: 64px;  --t-space-9: 96px;

  /* ── Radius ── */
  --t-radius-sm: 8px;
  --t-radius-md: 12px;
  --t-radius-lg: 16px;
  --t-radius-pill: 980px;

  /* ── Elevation ── */
  --t-shadow-1: 0 1px 3px rgba(0,0,0,0.4);
  --t-shadow-2: 0 6px 18px rgba(0,0,0,0.45);
  --t-shadow-3: 0 18px 48px rgba(0,0,0,0.55);

  /* ── Motion ── */
  --t-dur-1: 0.15s;
  --t-dur-2: 0.28s;
  --t-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Role names (26 Sep 2026) ─────────────────────────────────────────────
     One name per job for new code. Aliases, not new colours: each resolves to
     a token above, so both themes follow (data-theme sits on <html>, where
     these resolve). Older names (--gold, --sds-gold, --brass) map here too. */
  --color-background:  var(--t-canvas);
  --color-surface:     var(--t-surface-1);
  --color-surface-2:   var(--t-surface-2);
  --color-text:        var(--t-ink);
  --color-text-muted:  var(--t-ink-3);
  --color-border:      var(--t-line);
  --color-primary:     var(--t-gold-fill);
  --color-primary-hover: var(--t-gold-fill-hover);
  --color-primary-ink: var(--t-gold-ink);
  --color-accent:      var(--t-navy);
  --color-success:     var(--t-ok);
  --color-warning:     var(--t-warn);
  --color-error:       var(--t-crit);

  /* ── Buttons: one shape, three sizes (css/buttons.css) ── */
  --btn-h:      44px;
  --btn-h-sm:   36px;
  --btn-h-lg:   52px;
  --btn-pad-x:  28px;
  --btn-radius: var(--t-radius-pill);
  --btn-font:   0.9rem;
  --btn-weight: 600;

  /* ── Type roles ──
     h1, h2      display face, --t-size-3xl / --t-size-2xl, weight 400-600
     h3, labels  body face 600-650, --t-size-lg / --t-size-md
     body        body face 400, --t-size-base, --t-leading-body
     small/caption --t-size-sm / --t-size-xs
     figures     body face, tabular-nums, 600-650 */
}

[data-theme="light"] {
  /* Same roles, light ground. Note the two golds diverge here and only here:
     the fill stays rich, the ink darkens to stay legible as text. */
  --t-gold-fill:   #c79a3b;
  --t-gold-ink:    #6d5011;
  --t-gold-soft:   rgba(160,120,32,0.12);
  --t-gold-line:   rgba(160,120,32,0.30);
  --t-gold-fill-hover: #d4ab52;
  --t-btn2-bg:     rgba(255,255,255,0.75);
  --t-btn2-line:   rgba(160,120,32,0.45);

  --t-canvas:      #faf7f2;
  --t-surface-1:   #f0ebe0;
  --t-surface-2:   #e5dfd4;
  --t-surface-3:   #d8d2c6;
  --t-navy:        #1a2645;

  --t-ink:         #1a1208;
  --t-ink-2:       #4e4a42;
  --t-ink-3:       #6b6e78;
  --t-ink-4:       #7a7468;
  --t-line:        rgba(0,0,0,0.12);

  --t-ok:          #2f6a52;
  --t-warn:        #8a6516;
  --t-crit:        #a33b2a;

  --t-shadow-1: 0 1px 3px rgba(40,30,10,0.08);
  --t-shadow-2: 0 6px 18px rgba(40,30,10,0.10);
  --t-shadow-3: 0 18px 48px rgba(40,30,10,0.14);
}
/* Public theme: portal style (28 Sep 2026). Mohammad asked for the public site
   to look like the big listing portals: white ground, near-black type set heavy,
   one saturated blue for every action, light grey hairlines, 8-12px corners.
   sync-tokens keeps admin on the original first pair of palette blocks; this
   refinement belongs to the customer-facing site.

   The role names stay (--t-gold-*): they mean "the accent", and ~1,000 pages
   and every stylesheet already reach the accent through them, so re-pointing
   the values restyles all of it without touching markup. The KO Realty logo
   keeps its own gold; it is an image, not a token.

   --t-on-primary is new: the ink that sits ON the accent fill. Gold carried
   dark ink; blue carries white. Anything that paints text on --t-gold-fill
   should use it rather than a literal. */
:root {
  --t-font-display: var(--t-font-body);
  --t-weight-display: 800;
  --t-tracking-display: -0.02em;

  /* Dark palette (only when a visitor picks dark). The accent is a light
     blue here, used both as text and as a fill, so the ink ON the fill is
     dark: #8fb4ff carries #111113 at 9.6:1, where white on any mid blue
     that also reads as a link on this ground stays under 4.5:1. */
  --t-gold-fill:   #8fb4ff;
  /* A step lighter as text, so small type on the accent's own tint still
     clears 4.5:1 on the raised dark surfaces. */
  --t-gold-ink:    #a8c5ff;
  --t-gold-soft:   rgba(143,180,255,0.14);
  --t-gold-line:   rgba(143,180,255,0.42);
  --t-gold-fill-hover: #b0caff;
  --t-on-primary:  #111113;
  --t-btn2-bg:     transparent;
  --t-btn2-line:   rgba(143,180,255,0.55);
  --t-btn2-ink:    #a8c5ff;
  --t-canvas:      #111113;
  --t-surface-1:   #1a1a1e;
  --t-surface-2:   #232328;
  --t-surface-3:   #2d2d33;
  --t-ink:         #f4f4f6;
  --t-ink-2:       #cfcfd6;
  --t-ink-3:       #a7a7b0;
  --t-ink-4:       #8e8e98;
  --t-line:        rgba(255,255,255,0.14);
  --t-alert:       #ff7a45;
  /* Outline of filter pills, search boxes and form fields. */
  --t-control-line: rgba(255,255,255,0.28);
  /* Focus ring on a dark band or over a photo, in either theme. */
  --t-focus-on-dark: #8fb4ff;
  /* Text selection. */
  --t-select:      rgba(143,180,255,0.35);
  /* Fixed in both themes: ink on the always-white chips over photos and maps,
     and the portal's red for "For sale" and map price pins. */
  --t-on-light:    #111113;
  --t-pin:         #c6002f;
  --t-pin-hover:   #5a0614;
  --t-pin-cluster: #8a0022;

  --t-size-lg: 1.375rem;
  --t-size-xl: 1.75rem;
  --t-size-2xl: 2.125rem;
  --t-size-3xl: 3rem;
  --t-radius-sm: 8px;
  --t-radius-md: 12px;
  --t-radius-lg: 16px;
  --btn-radius: 8px;
  --btn-font: 1rem;
  --btn-weight: 700;
  --btn-pad-x: 24px;
}
[data-theme="light"] {
  /* Accent: the portal blue. #0041d9 on white is 8.3:1, so the same value
     serves as fill (with white ink) and as link text. */
  --t-gold-fill:   #0041d9;
  --t-gold-ink:    #0041d9;
  --t-gold-soft:   #e7f0fe;
  --t-gold-line:   rgba(0,65,217,0.32);
  --t-gold-fill-hover: #0033ad;
  --t-on-primary:  #ffffff;
  /* Secondary button: white with a blue outline and blue label. */
  --t-btn2-bg:     #ffffff;
  --t-btn2-line:   #0041d9;
  --t-btn2-ink:    #0041d9;

  --t-canvas:      #ffffff;
  --t-surface-1:   #f7f7f9;
  --t-surface-2:   #f1f1f4;
  --t-surface-3:   #e4e4e9;

  --t-ink:         #111113;
  --t-ink-2:       #2a2a33;
  --t-ink-3:       #54545c;
  --t-ink-4:       #6a6a73;
  --t-line:        #e3e3e6;
  /* "New" and price-drop flags on photos: the portal orange-red. */
  --t-alert:       #d03d0a;
  --t-control-line: #a7a6ab;
  --t-select:      #cfe0ff;

  --t-ok:          #0a7b4a;
  --t-warn:        #8a5a00;
  --t-crit:        #b3261e;

  --t-shadow-1: 0 1px 3px rgba(0,0,0,0.10);
  --t-shadow-2: 0 4px 16px rgba(0,0,0,0.12);
  --t-shadow-3: 0 16px 48px rgba(0,0,0,0.18);
}
@media (max-width: 640px) {
  :root {
    --t-size-lg: 1.25rem;
    --t-size-xl: 1.5rem;
    --t-size-2xl: 1.75rem;
    --t-size-3xl: 2.25rem;
  }
}
/* tokens:end */