/* ==========================================================================
   uSTADIUM Design Tokens — app token layer (served at /design-tokens.css)
   --------------------------------------------------------------------------
   MIRRORS design-system/tokens.css (the design-system package's single source
   of truth, also published to Claude Design). Keep the two in sync: when a
   token changes in the package, update it here too.

   This file makes the --us-* custom properties available to the whole app
   (onboarding.js inline styles + injected <style>, and dist/spa.js) so the
   redesign can consume var(--us-*) instead of hardcoded hex.

   Wordmark is ALWAYS "uSTADIUM". Voice rule: NO em dashes.
   Accent hierarchy: GOLD (--us-primary) leads; blue (--us-accent) supports.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600;700&family=Saira:ital,wght@0,700;0,800;0,900;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------ */
  /* RAW PALETTE — the constants. Never remapped by theme.              */
  /* ------------------------------------------------------------------ */

  /* Signature accent (constant on every surface) */
  --us-color-accent:        #1AAEFF;   /* Accent Blue */
  --us-color-accent-deep:   #0084CC;   /* hover / pressed */

  /* Gold (secondary highlight) */
  --us-color-gold:          #F0C040;
  --us-color-gold-soft:     #E8C97A;

  /* Navy scale (dark to light) */
  --us-color-navy-900:      #0A1628;   /* ink / darkest */
  --us-color-navy-850:      #0D1A35;   /* bg deep — primary dark background */
  --us-color-navy-800:      #142540;
  --us-color-navy-700:      #15264A;   /* card / surface */
  --us-color-navy-600:      #16315f;   /* elevated / featured card */
  --us-color-navy-500:      #243a60;   /* border on dark */

  /* ------------------------------------------------------------------ */
  /* LAYOUT — responsive desktop shell (Wave 0/1, 2026-07-05).          */
  /* NOTE: --us-bp-desktop documents the single breakpoint; CSS @media   */
  /* queries can't read a var() so they hardcode 900px in lockstep, and */
  /* the SPA useIsDesktop() hook uses matchMedia('(min-width:900px)').  */
  /* ------------------------------------------------------------------ */
  --us-bp-desktop:          900px;    /* the ONE breakpoint: <900 = phone layout, >=900 = desktop rail */
  --us-rail-w:              240px;     /* desktop left nav-rail width */

  /* Neutrals / slate */
  --us-color-slate-600:     #5A6478;
  --us-color-slate-500:     #607090;
  --us-color-slate-400:     #94A0B5;
  --us-color-slate-350:     #8DA0C0;   /* muted-on-dark */
  --us-color-slate-300:     #9fb2d0;
  --us-color-slate-100:     #EAF1FB;   /* text-on-dark */
  --us-color-white:         #FFFFFF;

  /* Light / "paper" mode palette */
  --us-color-paper:         #F8F8F5;
  --us-color-paper-white:   #FFFFFF;
  --us-color-ink:           #0A1628;

  /* Semantic hues */
  --us-color-success:       #10B981;
  --us-color-danger:        #ff5c5c;
  --us-color-orange:        #EA6A28;   /* retro accent */

  /* ------------------------------------------------------------------ */
  /* SEMANTIC ROLES — DARK is the default. Components use THESE.         */
  /* ------------------------------------------------------------------ */
  --us-bg:               var(--us-color-navy-850);   /* page background */
  --us-bg-deep:          var(--us-color-navy-900);    /* deepest wells */
  --us-surface:          var(--us-color-navy-700);    /* card / panel */
  --us-surface-raised:   var(--us-color-navy-600);    /* hovered / elevated card */
  --us-surface-featured: var(--us-surface-raised);    /* featured / flagship card */
  --us-surface-sunken:   var(--us-color-navy-800);    /* inputs / inset */
  --us-border:           var(--us-color-navy-500);    /* hairline on dark */
  --us-border-strong:    var(--us-color-slate-600);

  --us-text:             var(--us-color-slate-100);   /* primary text on dark */
  --us-text-strong:      var(--us-color-white);
  --us-text-muted:       var(--us-color-slate-350);   /* secondary text */
  --us-text-faint:       var(--us-color-slate-500);

  --us-accent:           var(--us-color-accent);
  --us-accent-hover:     var(--us-color-accent-deep);
  --us-on-accent:        var(--us-color-navy-900);     /* text on accent fill */

  --us-gold:             var(--us-color-gold);
  --us-gold-soft:        var(--us-color-gold-soft);
  --us-on-gold:          var(--us-color-navy-900);     /* text on gold fill */

  /* PRIMARY ACTION — the brand's hero accent is GOLD. Blue (--us-accent) is
     the SUPPORT accent. Components read --us-primary. */
  --us-primary:          var(--us-gold);
  --us-primary-soft:     var(--us-gold-soft);
  --us-on-primary:       var(--us-color-navy-900);     /* navy text on gold fill */

  --us-success:          var(--us-color-success);
  --us-danger:           var(--us-color-danger);

  /* ------------------------------------------------------------------ */
  /* TINTS — translucent hue washes for pill tags / chips / badges.     */
  /* ------------------------------------------------------------------ */
  --us-tint-accent:         rgba(26, 174, 255, 0.14);
  --us-tint-accent-border:  rgba(26, 174, 255, 0.42);
  --us-tint-gold:           rgba(240, 192, 64, 0.14);
  --us-tint-gold-border:    rgba(240, 192, 64, 0.42);
  --us-tint-goldsoft:        rgba(232, 201, 122, 0.14);   /* gold-soft wash */
  --us-tint-goldsoft-border: rgba(232, 201, 122, 0.42);   /* gold-soft border */
  --us-tint-success:        rgba(16, 185, 129, 0.14);
  --us-tint-success-border: rgba(16, 185, 129, 0.42);
  --us-tint-danger:         rgba(255, 92, 92, 0.14);
  --us-tint-danger-border:  rgba(255, 92, 92, 0.42);
  --us-tint-neutral:        rgba(141, 160, 192, 0.12);
  --us-tint-neutral-border: rgba(141, 160, 192, 0.34);
  --us-tint-neutral-text:   var(--us-color-slate-300);

  /* ------------------------------------------------------------------ */
  /* TYPOGRAPHY                                                         */
  /* ------------------------------------------------------------------ */
  --us-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --us-font-display-alt: 'Oswald', 'Saira', 'Bebas Neue', sans-serif;
  --us-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --us-font-numeric: 'Space Grotesk', 'DM Sans', ui-monospace, monospace;

  --us-text-xs:    0.6875rem;  /* 11px */
  --us-text-sm:    0.8125rem;  /* 13px */
  --us-text-base:  0.9375rem;  /* 15px */
  --us-text-md:    1.0625rem;  /* 17px */
  --us-text-lg:    1.375rem;   /* 22px */
  --us-text-xl:    1.75rem;    /* 28px */
  --us-text-2xl:   2.25rem;    /* 36px */
  --us-text-3xl:   3rem;       /* 48px */
  --us-text-4xl:   4rem;       /* 64px */

  --us-leading-tight:  1.05;
  --us-leading-snug:   1.25;
  --us-leading-normal: 1.5;

  --us-weight-regular: 400;
  --us-weight-medium:  500;
  --us-weight-semibold:600;
  --us-weight-bold:    700;

  --us-tracking-display: 0.015em;
  --us-tracking-normal:  0;
  --us-tracking-label:   0.18em;
  --us-tracking-label-wide: 0.24em;

  /* ------------------------------------------------------------------ */
  /* SPACING — 8px base scale                                           */
  /* ------------------------------------------------------------------ */
  --us-space-0:   0;
  --us-space-1:   0.25rem;
  --us-space-2:   0.5rem;
  --us-space-3:   0.75rem;
  --us-space-4:   1rem;
  --us-space-5:   1.5rem;
  --us-space-6:   2rem;
  --us-space-7:   2.5rem;
  --us-space-8:   3rem;
  --us-space-10:  4rem;
  --us-space-12:  6rem;

  /* ------------------------------------------------------------------ */
  /* RADII                                                              */
  /* ------------------------------------------------------------------ */
  --us-radius-sm:   6px;
  --us-radius-md:   12px;
  --us-radius-lg:   16px;
  --us-radius-xl:   20px;
  --us-radius-pill: 999px;

  /* ------------------------------------------------------------------ */
  /* SHADOWS + GLOWS                                                    */
  /* ------------------------------------------------------------------ */
  --us-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --us-shadow-md:  0 6px 18px rgba(0, 0, 0, 0.35);
  --us-shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.45);

  --us-glow-accent:       0 0 0 1px rgba(26, 174, 255, 0.35), 0 6px 22px rgba(26, 174, 255, 0.35);
  --us-glow-accent-strong:0 0 0 1px rgba(26, 174, 255, 0.55), 0 10px 30px rgba(26, 174, 255, 0.55);
  --us-glow-gold:         0 0 0 1px rgba(240, 192, 64, 0.40), 0 6px 22px rgba(240, 192, 64, 0.35);

  --us-glow-primary:        0 0 0 1px rgba(240, 192, 64, 0.40), 0 10px 34px rgba(240, 192, 64, 0.16);
  --us-glow-primary-strong: 0 0 0 1px rgba(240, 192, 64, 0.55), 0 12px 40px rgba(240, 192, 64, 0.30);

  --us-focus-ring: 0 0 0 3px rgba(26, 174, 255, 0.55);
  --us-focus-ring-danger: 0 0 0 3px rgba(255, 92, 92, 0.45);

  /* ------------------------------------------------------------------ */
  /* BRAND DEVICES                                                      */
  /* ------------------------------------------------------------------ */
  --us-top-accent-bar: linear-gradient(90deg, var(--us-gold) 0%, var(--us-gold-soft) 100%);
  --us-brand-rule:     linear-gradient(90deg, var(--us-danger) 0%, var(--us-gold) 50%, var(--us-accent) 100%);

  /* ------------------------------------------------------------------ */
  /* MOTION                                                             */
  /* ------------------------------------------------------------------ */
  --us-ease:            cubic-bezier(0.2, 0.7, 0.2, 1);
  --us-duration-fast:   120ms;
  --us-duration-base:   180ms;
  --us-duration-slow:   280ms;
}

/* ====================================================================== */
/* LIGHT / "PAPER" MODE — remaps SEMANTIC roles only (used on /workwithus) */
/* ====================================================================== */
[data-theme="light"] {
  --us-bg:             var(--us-color-paper);
  --us-bg-deep:        var(--us-color-paper-white);
  --us-surface:        var(--us-color-paper-white);
  --us-surface-raised: var(--us-color-paper-white);
  --us-surface-sunken: var(--us-color-paper);
  --us-border:         rgba(10, 22, 40, 0.12);
  --us-border-strong:  rgba(10, 22, 40, 0.24);

  --us-text:           var(--us-color-ink);
  --us-text-strong:    var(--us-color-navy-900);
  --us-text-muted:     var(--us-color-slate-500);
  --us-text-faint:     var(--us-color-slate-400);

  --us-accent:         var(--us-color-accent-deep);
  --us-accent-hover:   #006BA6;
  --us-on-accent:      var(--us-color-white);

  --us-gold:           #C79A1E;
  --us-on-gold:        var(--us-color-navy-900);

  --us-tint-accent:         rgba(0, 132, 204, 0.12);
  --us-tint-accent-border:  rgba(0, 132, 204, 0.40);
  --us-tint-gold:           rgba(199, 154, 30, 0.14);
  --us-tint-gold-border:    rgba(199, 154, 30, 0.44);
  --us-tint-goldsoft:        rgba(199, 154, 30, 0.14);
  --us-tint-goldsoft-border: rgba(199, 154, 30, 0.44);
  --us-tint-success:        rgba(16, 185, 129, 0.14);
  --us-tint-success-border: rgba(16, 185, 129, 0.44);
  --us-tint-danger:         rgba(255, 92, 92, 0.16);
  --us-tint-danger-border:  rgba(255, 92, 92, 0.46);
  --us-tint-neutral:        rgba(10, 22, 40, 0.06);
  --us-tint-neutral-border: rgba(10, 22, 40, 0.18);
  --us-tint-neutral-text:   var(--us-color-slate-500);

  --us-shadow-sm:  0 1px 2px rgba(10, 22, 40, 0.08);
  --us-shadow-md:  0 6px 18px rgba(10, 22, 40, 0.10);
  --us-shadow-lg:  0 16px 40px rgba(10, 22, 40, 0.14);
  --us-glow-accent:        0 0 0 1px rgba(0, 132, 204, 0.25), 0 6px 22px rgba(0, 132, 204, 0.22);
  --us-glow-accent-strong: 0 0 0 1px rgba(0, 132, 204, 0.40), 0 10px 30px rgba(0, 132, 204, 0.32);
  --us-glow-gold:          0 0 0 1px rgba(199, 154, 30, 0.35), 0 6px 22px rgba(199, 154, 30, 0.28);
  --us-glow-primary:        0 0 0 1px rgba(199, 154, 30, 0.35), 0 10px 34px rgba(199, 154, 30, 0.16);
  --us-glow-primary-strong: 0 0 0 1px rgba(199, 154, 30, 0.50), 0 12px 40px rgba(199, 154, 30, 0.26);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --us-duration-fast: 0ms;
    --us-duration-base: 0ms;
    --us-duration-slow: 0ms;
  }
}