/* Site developed and built by sitethreesixty.com */

/* ============================================================
   tokens.css — Trade lane (Lane B) brand identity tokens
   + @font-face declarations.
   The ONLY file in this lane that defines CSS custom properties
   (TRADE-LANE-PLAN.md gate L3).

   This lane is NOT 12 West (ruling T1) — no six-file rule, no
   frame/framework/zone/pos-* system. Own foundation, same palette.

   Palette copied VERBATIM from ../../css/tokens.css per brief
   BRIEF-LANE-B-T1-FOUNDATION.md "FILE 1". Do not re-derive values.
   ============================================================ */

/* --- @font-face declarations (FIRST — before tokens, before anything.
   Carried from the trade source's own critical.css, lines 13 + 23 —
   NOT Lane A's Jost. Parse order = discovery order. --- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('../assets/fonts/montserrat-ascii.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A3, U+00A9, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+20AC;
}

/* Matched fallback — same metrics as Montserrat to prevent CLS on font swap */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Arial');
  size-adjust: 113%;
  ascent-override: 85%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- Custom properties --- */

:root {

  /* ---- Brand palette (sitethreesixty — verbatim from css/tokens.css) ---- */
  --chalk: #F7F5F2;       /* 60% base — calm reading zones */
  --graphite: #14201F;    /* 30% structure — assertive zones */
  --slate: #5C6A69;       /* aside band */
  --torch: #E2511B;       /* 10% — display/UI/borders/active-marker. NEVER text. */
  --torch-deep: #B23C10;  /* LIGHT-GROUND ONLY — text & CTA fill, 5.44:1 on chalk, 2.82:1 on graphite ✗ */
  --torch-deepest: #9A340E; /* pressed/hover state for torch-deep CTAs — one step darker than --torch-deep. */

  /* ---- Dark-ground text counterparts ----
     --torch and --slate each served as BOTH the light- and dark-ground value
     for their role. That cannot work: the two grounds need opposite luminance,
     so no single value clears 4.5:1 on both. --torch-deep already solved the
     light half for the accent; these two solve the dark half for accent and
     muted.

     ⚠️ DARK-GROUND ONLY. On chalk these FAIL (#F26B2C 2.79:1, #94A3A0 2.41:1).
     Gate A6b enforces it. On light grounds use --torch-deep / --slate. */
  --torch-bright: #F26B2C; /* DARK-GROUND ONLY — accent text, 5.50:1 on graphite, 2.79:1 on chalk ✗ */
  --slate-light: #94A3A0;  /* DARK-GROUND ONLY — muted text, 6.37:1 on graphite, 2.41:1 on chalk ✗ */

  /* ---- Font families ----
     Trade lane keeps its own source's type stack (Montserrat), not
     Lane A's Jost — the brief's Font-face section carries the trade
     source's declarations, not the 12 West ones. */
  --font-heading: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Font weights ---- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line heights ---- */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ---- Letter spacing ---- */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* ---- Font sizes — mobile-first, scale up on larger screens.
     Carried from the trade source's type scale (critical.css); this
     is what the trade template actually uses. ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* ---- Border radius ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- Shadows (Graphite-based, never pure black) ---- */
  --shadow-sm: 0 1px 2px 0 color-mix(in srgb, var(--graphite) 5%, transparent);
  --shadow-md: 0 4px 6px -1px color-mix(in srgb, var(--graphite) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--graphite) 10%, transparent);
  --shadow-lg: 0 10px 15px -3px color-mix(in srgb, var(--graphite) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--graphite) 10%, transparent);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;

  /* ---- Backdrop blur (hero ghost button) ---- */
  --backdrop-blur: blur(8px);

  /* ---- Z-index scale — trade template's own values (not 12 West's) ---- */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-crg-banner: 15;
  --z-modal: 1000;
  --z-skip-link: 100;
}

/* https://www.sitethreesixty.com */