/* ==========================================================================
   BuildTrack Design System — "Launch" variant tokens  (v1.0)
   Direction: loud, clean, premium startup. Glass panels over a lit
   gradient field, colored shadows, springy motion. Gold = commit/save.
   Same token names as the industrial variant, so components are swappable.
   ========================================================================== */

/* Fonts: system stacks only. Nothing is fetched from the web.
   iPad renders San Francisco, Windows renders Segoe UI; hierarchy comes from weight and size. */

:root {
  color-scheme: dark;

  /* ---------- Surfaces (Midnight) ---------- */
  --bt-bg:          #0A0E1A;
  --bt-mesh:
    radial-gradient(900px 600px at 8% -10%,  rgba(79,124,255,.32), transparent 60%),
    radial-gradient(800px 600px at 100% 20%, rgba(20,184,166,.22), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(129,140,248,.18), transparent 60%);
  --bt-bg-grid:     transparent;
  --bt-surface:     rgba(17, 23, 40, 0.68);   /* glass — pair with backdrop-filter */
  --bt-raised:      #182036;
  --bt-overlay:     rgba(4, 7, 16, 0.62);
  --bt-line:        rgba(255, 255, 255, 0.08);
  --bt-line-strong: rgba(255, 255, 255, 0.16);
  --bt-glass-blur:  18px;

  /* ---------- Text ---------- */
  --bt-text:        #F3F5F9;
  --bt-text-muted:  #9AA4B8;
  --bt-text-faint:  #626D84;
  --bt-text-on-accent: #FFFFFF;

  /* ---------- Accent: electric blue ---------- */
  --bt-accent:        #4F7CFF;
  --bt-accent-hover:  #6B91FF;
  --bt-accent-press:  #3B66EA;
  --bt-accent-text:   #93B1FF;
  --bt-accent-soft:   rgba(79, 124, 255, 0.16);
  --bt-accent-glow:   0 0 0 1px rgba(107,145,255,.55), 0 10px 32px rgba(79,124,255,.45);
  --bt-accent-grad:   linear-gradient(135deg, #6B91FF 0%, #4F7CFF 55%, #3B66EA 100%);

  /* ---------- Gold: save, create, commit. Nothing else. ---------- */
  --bt-gold-1: #FFF1B8;
  --bt-gold-2: #F5C542;
  --bt-gold-3: #C9931A;
  --bt-gold-text-on: #2A1D00;
  --bt-gold-grad: linear-gradient(135deg, var(--bt-gold-1) 0%, var(--bt-gold-2) 45%, var(--bt-gold-3) 100%);
  --bt-gold-glow: 0 0 0 1px rgba(255,241,184,.45), 0 12px 36px rgba(245,197,66,.45);
  --bt-gold-glow-hover: 0 0 0 1px rgba(255,241,184,.7), 0 16px 48px rgba(245,197,66,.65);

  /* ---------- Status ---------- */
  --bt-pass:        #34D399;  --bt-pass-soft:   rgba(52,211,153,.16);
  --bt-fail:        #FB7185;  --bt-fail-soft:   rgba(251,113,133,.16);
  --bt-active:      #38BDF8;  --bt-active-soft: rgba(56,189,248,.16);
  --bt-warn:        #FBBF24;  --bt-warn-soft:   rgba(251,191,36,.16);
  --bt-idle:        #8B95A7;  --bt-idle-soft:   rgba(139,149,167,.16);
  --bt-hazard: repeating-linear-gradient(-45deg,
                 rgba(251,191,36,.95) 0 8px, rgba(10,14,26,.95) 8px 16px);

  --bt-led-pass:   0 0 10px rgba(52,211,153,.9);
  --bt-led-fail:   0 0 10px rgba(251,113,133,.9);
  --bt-led-active: 0 0 10px rgba(56,189,248,.9);
  --bt-led-warn:   0 0 10px rgba(251,191,36,.9);

  /* ---------- Elevation: deep, colored ---------- */
  --bt-shadow-1: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 14px rgba(2,6,23,.45);
  --bt-shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 48px rgba(2,6,23,.6), 0 0 0 1px rgba(255,255,255,.03);
  --bt-shadow-3: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 100px rgba(2,6,23,.8), 0 0 60px rgba(79,124,255,.12);
  --bt-shadow-lift: 0 1px 0 rgba(255,255,255,.08) inset, 0 28px 64px rgba(2,6,23,.7), 0 0 0 1px rgba(107,145,255,.25);
  --bt-focus:    0 0 0 2px var(--bt-bg), 0 0 0 5px var(--bt-accent), 0 0 24px rgba(79,124,255,.5);

  /* ---------- Typography ---------- */
  --bt-font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bt-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bt-font-data:    ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace; /* IDs, counters, timestamps only */

  --bt-text-xs:   12px;  --bt-text-sm:  13.5px; --bt-text-base: 15px;
  --bt-text-md:   17px;  --bt-text-lg:  21px;   --bt-text-xl:   28px;
  --bt-text-2xl:  36px;  --bt-text-3xl: 48px;   --bt-text-4xl:  68px;
  --bt-leading-tight: 1.1;
  --bt-leading-body:  1.55;

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

  /* ---------- Shape: soft, pill-ready ---------- */
  --bt-radius-xs: 6px;
  --bt-radius-sm: 10px;
  --bt-radius-md: 16px;
  --bt-radius-lg: 24px;
  --bt-radius-pill: 999px;

  --bt-hit-min:   44px;
  --bt-hit-floor: 56px;

  /* ---------- Motion: a touch longer, springy ---------- */
  --bt-dur-instant: 90ms;
  --bt-dur-fast:    160ms;
  --bt-dur-base:    260ms;
  --bt-dur-slow:    440ms;
  --bt-dur-flash:   1400ms;
  --bt-dur-shine:   2800ms;  /* gold sweep period */

  --bt-ease-out:  cubic-bezier(.22, 1, .36, 1);
  --bt-ease-in:   cubic-bezier(.55, 0, 1, .45);
  --bt-ease-snap: cubic-bezier(.34, 1.56, .64, 1);  /* spring */
  --bt-ease-std:  cubic-bezier(.4, 0, .2, 1);

  --bt-stagger: 50ms;
  --bt-rise:    14px;

  --bt-sidebar-w: 240px;
  --bt-sidebar-rail: 64px;
  --bt-topbar-h: 64px;
  --bt-content-max: 1440px;
}

/* ==========================================================================
   Daylight (light)
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bt-bg:          #F5F7FC;
  --bt-mesh:
    radial-gradient(900px 600px at 8% -10%,  rgba(79,124,255,.18), transparent 60%),
    radial-gradient(800px 600px at 100% 20%, rgba(20,184,166,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(129,140,248,.12), transparent 60%);
  --bt-surface:     rgba(255, 255, 255, 0.78);
  --bt-raised:      #FFFFFF;
  --bt-overlay:     rgba(15, 23, 42, 0.42);
  --bt-line:        rgba(15, 23, 42, 0.08);
  --bt-line-strong: rgba(15, 23, 42, 0.16);

  --bt-text:        #0F172A;
  --bt-text-muted:  #596273;
  --bt-text-faint:  #8A93A6;
  --bt-text-on-accent: #FFFFFF;

  --bt-accent:        #3B5BFF;
  --bt-accent-hover:  #5572FF;
  --bt-accent-press:  #2E4AE0;
  --bt-accent-text:   #2F49D6;
  --bt-accent-soft:   rgba(59, 91, 255, 0.12);
  --bt-accent-glow:   0 0 0 1px rgba(59,91,255,.35), 0 10px 30px rgba(59,91,255,.30);
  --bt-accent-grad:   linear-gradient(135deg, #5572FF 0%, #3B5BFF 55%, #2E4AE0 100%);

  --bt-gold-1: #FFF4C2;  --bt-gold-2: #F2BD2C;  --bt-gold-3: #B9820C;
  --bt-gold-glow: 0 0 0 1px rgba(185,130,12,.35), 0 12px 32px rgba(242,189,44,.40);
  --bt-gold-glow-hover: 0 0 0 1px rgba(185,130,12,.5), 0 16px 44px rgba(242,189,44,.55);

  --bt-pass:   #0E9F6E; --bt-pass-soft:   rgba(14,159,110,.12);
  --bt-fail:   #E11D48; --bt-fail-soft:   rgba(225,29,72,.10);
  --bt-active: #0284C7; --bt-active-soft: rgba(2,132,199,.11);
  --bt-warn:   #B45309; --bt-warn-soft:   rgba(251,191,36,.18);
  --bt-idle:   #6B7489; --bt-idle-soft:   rgba(107,116,137,.12);
  --bt-hazard: repeating-linear-gradient(-45deg, #F2BD2C 0 8px, #0F172A 8px 16px);

  --bt-led-pass:   0 0 0 3px rgba(14,159,110,.18);
  --bt-led-fail:   0 0 0 3px rgba(225,29,72,.16);
  --bt-led-active: 0 0 0 3px rgba(2,132,199,.16);
  --bt-led-warn:   0 0 0 3px rgba(242,189,44,.25);

  --bt-shadow-1: 0 2px 8px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.03);
  --bt-shadow-2: 0 16px 40px rgba(59,91,255,.10), 0 2px 6px rgba(15,23,42,.05);
  --bt-shadow-3: 0 40px 100px rgba(15,23,42,.22), 0 0 60px rgba(59,91,255,.10);
  --bt-shadow-lift: 0 28px 60px rgba(59,91,255,.18), 0 0 0 1px rgba(59,91,255,.18);
  --bt-focus:    0 0 0 2px var(--bt-bg), 0 0 0 5px var(--bt-accent), 0 0 20px rgba(59,91,255,.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bt-rise: 0px;
    --bt-stagger: 0ms;
    --bt-dur-slow: 180ms;
    --bt-ease-snap: var(--bt-ease-std);
  }
}