/* =====================================================================
   Walkable Design System — Foundation tokens
   Ported from the design system handoff (colors_and_type.css). This file
   is loaded on every tenant-facing surface. The `--brand-*` block at the
   bottom is the WHITE-LABEL HOOK: tenants override those variables via
   a per-request <style> block in mainLayout.pug. Everything else (asphalt,
   slate, paper, status, type scale, radii, shadows, motion) is the system
   identity and is NOT overridable.

   Fonts are intentionally NOT @imported here — layouts load them
   conditionally based on the tenant's chosen font, so we don't pay for
   webfonts the page doesn't use.
   ===================================================================== */

:root {
  /* =========================================================
     COLOR — Base palette
     ========================================================= */

  /* Asphalt — primary anchor (near-black, warm cast) */
  --asphalt-950: #0E0F12;
  --asphalt-900: #16181D;
  --asphalt-800: #20242C;
  --asphalt-700: #2C313B;
  --asphalt-600: #3D434F;

  /* Slate — cool neutrals */
  --slate-500: #6B7280;
  --slate-400: #8E95A1;
  --slate-300: #B6BBC4;
  --slate-200: #D7DAE0;
  --slate-100: #ECEEF2;
  --slate-50:  #F5F6F8;

  /* Paper — warm off-white backgrounds */
  --paper-50:  #FBFAF6;
  --paper-100: #F5F2E9;
  --paper-200: #EBE6D6;

  /* Safety — the hot accent. Confident, NOT hi-vis-novelty. */
  --safety-700: #C24A0E;
  --safety-600: #E25A14;
  --safety-500: #F26A1E;   /* default brand orange */
  --safety-400: #FF8A47;
  --safety-200: #FFD2B0;
  --safety-100: #FFE6D2;

  /* Sky — secondary accent (used sparingly for info/links) */
  --sky-700: #1E5A8C;
  --sky-500: #2E7BB8;
  --sky-200: #BFE0F5;

  /* Moss — success */
  --moss-700: #2A6A3D;
  --moss-500: #3F8F5C;
  --moss-200: #C6E4CF;

  /* Brick — danger / overdue */
  --brick-700: #9C2B22;
  --brick-500: #C73B30;
  --brick-200: #F5C6C2;

  /* Sun — warning / pending */
  --sun-700: #946712;
  --sun-500: #D69518;
  --sun-200: #FBE2A4;

  /* =========================================================
     COLOR — Semantic tokens
     ========================================================= */
  --bg-page:        var(--paper-50);
  --bg-surface:     #FFFFFF;
  --bg-sunken:      var(--paper-100);
  --bg-inverse:     var(--asphalt-900);
  --bg-accent:      var(--safety-500);
  --bg-accent-soft: var(--safety-100);

  --fg-1:          var(--asphalt-900);   /* primary text */
  --fg-2:          var(--asphalt-700);   /* secondary text */
  --fg-3:          var(--slate-500);     /* tertiary / labels */
  --fg-inverse:    var(--paper-50);
  --fg-accent:     var(--safety-600);
  --fg-link:       var(--sky-700);

  --border-subtle: var(--slate-200);
  --border-strong: var(--asphalt-900);
  --border-accent: var(--safety-500);

  --status-success-fg: var(--moss-700);
  --status-success-bg: var(--moss-200);
  --status-warning-fg: var(--sun-700);
  --status-warning-bg: var(--sun-200);
  --status-danger-fg:  var(--brick-700);
  --status-danger-bg:  var(--brick-200);
  --status-info-fg:    var(--sky-700);
  --status-info-bg:    var(--sky-200);

  /* =========================================================
     TYPE — Families (system defaults; tenant override layer
     below overrides --brand-font-* without touching these.)
     ========================================================= */
  --font-display: 'Familjen Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* TYPE — Scale */
  --fs-display:   56px;
  --fs-h1:        40px;
  --fs-h2:        28px;
  --fs-h3:        22px;
  --fs-body-lg:   18px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-micro:     11px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-loose:     1.6;

  --tracking-tight: -0.02em;
  --tracking-cap:    0.08em;

  /* =========================================================
     SHAPE — Radii, shadows, spacing, motion
     ========================================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 0 rgba(20,22,28,0.04);
  --shadow-sm: 0 1px 2px rgba(20,22,28,0.06), 0 1px 1px rgba(20,22,28,0.04);
  --shadow-md: 0 4px 12px rgba(20,22,28,0.08), 0 1px 2px rgba(20,22,28,0.04);
  --shadow-lg: 0 12px 32px rgba(20,22,28,0.12), 0 2px 6px rgba(20,22,28,0.06);
  --shadow-pop: 0 18px 40px rgba(20,22,28,0.18);

  /* Stamp shadow: signature flat hard offset for primary CTAs and feature
     cards. Use sparingly. */
  --stamp-2: 2px 2px 0 var(--asphalt-900);
  --stamp-4: 4px 4px 0 var(--asphalt-900);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* =========================================================
     BRAND HOOKS — tenant-overridable. Defaults map to design-system
     values; mainLayout.pug emits a per-request <style>:root {…}</style>
     block that overrides only the tenant's chosen values.

     The hover/soft variants are DERIVED from --brand-primary with
     color-mix() so they auto-track any custom color a tenant picks.
     This is the fix for "tenant sets a green primary but hover jumps
     to design-system orange." color-mix() is supported in every
     evergreen browser since 2023.
     ========================================================= */
  --brand-primary:        var(--safety-500);
  --brand-primary-hover:  color-mix(in srgb, var(--brand-primary) 88%, #000);
  --brand-primary-active: color-mix(in srgb, var(--brand-primary) 78%, #000);
  --brand-primary-soft:   color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --brand-primary-on:     #FFFFFF;            /* fg color on top of primary */
  --brand-accent:         var(--sky-500);
  --brand-accent-hover:   color-mix(in srgb, var(--brand-accent) 88%, #000);
  --brand-accent-soft:    color-mix(in srgb, var(--brand-accent) 18%, transparent);
  --brand-bg:             var(--paper-50);
  --brand-surface:        var(--bg-surface);

  --brand-font-display:   var(--font-display);
  --brand-font-body:      var(--font-body);
  --brand-font-mono:      var(--font-mono);
}

/* =====================================================================
   SEMANTIC TYPE CLASSES — use directly on elements when you don't have
   a more specific component class.
   ===================================================================== */
.t-display {
  font-family: var(--brand-font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--brand-font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--brand-font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-body-lg {
  font-family: var(--brand-font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--brand-font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.t-small {
  font-family: var(--brand-font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-micro {
  font-family: var(--brand-font-body);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--brand-font-mono);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--fg-2);
}