/* ============================================================
   FORGE OS — Design System v3.2.0
   Warm Dark Athletic — approved 2026-04-19
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&family=Sora:wght@400;500;600;700&display=swap');

:root {
  /* ── Primary — Electric Lime ── */
  --primary-100: #E8F5A0;
  --primary-200: #D8ED75;
  --primary:     #C8E64A;
  --primary-600: #9BBF1E;
  --primary-800: #6D8A0F;
  --primary-900: #3D4E08;

  /* ── Surfaces — warm dark ── */
  --surface-900: #0D0C0A;
  --surface-800: #141311;
  --surface-700: #1C1B18;
  --surface-600: #252420;
  --surface-500: #2E2D28;
  --surface-400: #3A3833;
  --surface-300: #524F48;
  --surface-200: #888580;
  --surface-100: #B5B2AC;
  --surface-50:  #F5F3EF;

  /* ── Legacy aliases — HTML files use these ── */
  --bg-base:    var(--surface-800);
  --bg-s1:      var(--surface-700);
  --bg-s2:      var(--surface-600);
  --bg-s3:      var(--surface-500);
  --bg-overlay: var(--surface-900);
  --border:     var(--surface-400);
  --border-sub: var(--surface-500);
  --o500: var(--primary);
  --o400: var(--primary-200);
  --o300: var(--primary-100);
  --o200: #D4EE8A;
  --o100: var(--primary-100);
  --o900: var(--primary-900);
  --o800: #4A6B10;
  --o700: var(--primary-800);
  --t1: var(--surface-50);
  --t2: var(--surface-100);
  --t3: var(--surface-200);
  --t4: var(--surface-300);

  /* ── Semantic ── */
  --success:    #34D399;
  --success-bg: #042314;
  --warning:    #FBBF24;
  --warning-bg: #1A1100;
  --danger:     #EF4444;
  --danger-bg:  #1A0303;
  --info:       #60A5FA;
  --info-bg:    #091630;
  --green:    var(--success);
  --green-br: var(--success);
  --green-bg: var(--success-bg);
  --amber:    var(--warning);
  --amber-br: var(--warning);
  --amber-bg: var(--warning-bg);
  --red:      var(--danger);
  --red-bg:   var(--danger-bg);
  --blue:     var(--info);
  --blue-bg:  var(--info-bg);
  --purple:   #A78BFA;
  --purple-bg:#110B2A;

  /* ── Shadows ── */
  --sh-card:   0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  --sh-raised: 0 4px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  --sh-orange: 0 4px 20px rgba(200,230,74,.15), 0 1px 4px rgba(200,230,74,.08);
  --sh-green:  0 4px 16px rgba(52,211,153,.18);

  /* ── Radii ── */
  --r-xs:  6px;  --r-sm:  8px;  --r-md:  12px;
  --r-lg:  16px; --r-xl:  20px; --r-2xl: 24px; --r-pill:9999px;

  /* ── Spacing ── */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
  --sp5:20px; --sp6:24px; --sp8:32px; --sp10:40px;

  /* ── Easing ── */
  --ease-expo:   cubic-bezier(0.16,1,0.3,1);
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  /* ── Font stacks (index.html uses these) ── */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Sora', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Primary aliases ── */
  --primary-dark:    var(--primary-600);
  --primary-text-on: #1A1816;

  /* ── Category colours ── */
  --run:  #60A5FA;
  --str:  var(--primary);
  --hyrox: var(--surface-50);
  --swim: #2DD4BF;
  --trx:  #A78BFA;
  --rec:  #6B7280;

  /* ── Category colour + bg pairs ── */
  --cat-run:   var(--run);   --cat-run-bg:   #091630;
  --cat-str:   var(--str);   --cat-str-bg:   #3D4E08;
  --cat-hyrox: #34D399;      --cat-hyrox-bg: #042314;
  --cat-swim:  var(--swim);  --cat-swim-bg:  #0A3030;
  --cat-rec:   var(--rec);   --cat-rec-bg:   var(--surface-600);

  /* ── Status container colours ── */
  --warning-container: #1A1100;
  --success-container: #042314;
  --error:             var(--danger);
  --error-container:   #1A0303;

  /* ── Legacy M3 aliases (keep — referenced in index.html CSS) ── */
  --on-surface:              var(--surface-50);
  --on-surface-variant:      var(--surface-100);
  --outline:                 var(--surface-200);
  --outline-variant:         var(--surface-400);
  --surface-container:       var(--surface-600);
  --surface-container-high:  var(--surface-500);
  --surface-container-highest: var(--surface-400);
  --surface-container-low:   var(--surface-700);
  --surface-variant:         var(--surface-500);
  --surface-dim:             var(--surface-900);

  /* ── Elevation aliases ── */
  --elevation-1: var(--sh-card);
  --elevation-2: var(--sh-raised);

  --briefing-bg: #1C1B18;   /* warm dark elevated — always-dark hero card */
  --hero-bg: #1C1B18;   /* shared always-dark token for hero cards + toast */
}

/* ── Light mode override ── applied via body.theme-light ── */
.theme-light {
  --surface-900: #F5F3EF;
  --surface-800: #FAFAF8;
  --surface-700: #F2EDE7;
  --surface-600: #E8E1D9;
  --surface-500: #D6CEC4;
  --surface-400: #BFB6AB;
  --surface-300: #8E857A;
  --surface-200: #5C534A;
  --surface-100: #2E2922;
  --surface-50:  #1A1512;

  --bg-base:    #FAFAF8;
  --bg-s1:      #F2EDE7;
  --bg-s2:      #E8E1D9;
  --bg-s3:      #D6CEC4;
  --bg-overlay: rgba(0,0,0,0.4);

  --border:     #BFB6AB;
  --border-sub: #D6CEC4;

  --t1: #1A1512;
  --t2: #2E2922;
  --t3: #5C534A;
  --t4: #8E857A;

  --sh-card:   0 1px 3px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06);
  --sh-raised: 0 4px 12px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.08);

  --on-surface:              #1A1512;
  --on-surface-variant:      #2E2922;
  --outline:                 #5C534A;
  --outline-variant:         #BFB6AB;
  --surface-container:       #E8E1D9;
  --surface-container-high:  #D6CEC4;
  --surface-container-highest: #BFB6AB;
  --surface-container-low:   #F2EDE7;
  --surface-variant:         #D6CEC4;
  --surface-dim:             #E8E1D9;

  --cat-run-bg:   #D0E4FF;
  --cat-str-bg:   #D4EE8A;
  --cat-hyrox-bg: #B6EFD4;
  --cat-swim-bg:  #B6EEE8;
  --cat-rec-bg:   #E8E1D9;

  --success-bg: #D1FAE5;
  --warning-bg: #FEF3C7;
  --danger-bg:  #FEE2E2;
  --info-bg:    #DBEAFE;

  --briefing-bg: #1A1512;   /* stays dark in light mode — cockpit aesthetic */
  --hero-bg: #1A1512;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

body {
  font-family:'Sora',sans-serif;
  background: var(--bg-base);
  color: var(--t1);
  max-width: 375px;
  margin: 0 auto;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ── Typography helpers ── */
.display-2xl { font-family:'Space Grotesk',sans-serif; font-size:52px; font-weight:700; letter-spacing:-2px; line-height:1; }
.display-xl  { font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:700; letter-spacing:-1px; line-height:1; }
.display-lg  { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; letter-spacing:-0.5px; line-height:1.1; }
.display-md  { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; line-height:1.2; }
.display-sm  { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; line-height:1.2; }
.title       { font-size:16px; font-weight:600; line-height:1.3; }
.body-lg     { font-size:14px; font-weight:400; line-height:1.6; }
.body        { font-size:13px; font-weight:400; line-height:1.5; }
.label       { font-size:12px; font-weight:500; line-height:1.4; }
.caption     { font-size:11px; font-weight:500; letter-spacing:.3px; line-height:1.4; }
.overline    { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; line-height:1.4; }

/* ── Layout ── */
.content {
  padding: 16px 16px calc(84px + env(safe-area-inset-bottom,0px));
  display: flex; flex-direction: column; gap: 12px;
}

/* ── Top bar ── */
.topbar {
  position: sticky; top:0; z-index:100;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-sub);
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  height: 52px;
}
.logo {
  font-family:'Space Grotesk',sans-serif;
  font-size:20px; font-weight:700; letter-spacing:2px; color:var(--t1);
}
.topbar-right { display:flex; align-items:center; gap:10px; }
.level-badge {
  font-size:10px; font-weight:700; letter-spacing:.8px;
  background:var(--surface-600); color:var(--primary);
  padding:5px 10px; border-radius:var(--r-pill);
  border:1px solid var(--surface-400);
}
.date-badge { font-size:11px; color:var(--t3); letter-spacing:.5px; }

/* ── Section header ── */
.sec-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sec-title { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--t3); }
.sec-sub   { font-size:10px; color:var(--t4); }

/* ── Bottom nav pill ── */
.bottom-nav {
  position: fixed; bottom:0;
  left:50%; transform:translateX(-50%);
  width:375px; z-index:100;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  background: linear-gradient(to top, var(--bg-base) 60%, transparent);
}
.nav-pill {
  background:var(--bg-s1);
  border-radius:var(--r-xl);
  height:54px; display:flex; padding:4px;
  border:1px solid var(--border);
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; border-radius:14px;
  border:none; background:none; cursor:pointer;
  transition: background 200ms var(--ease-smooth);
}
.nav-btn.active { background:var(--o500); }
.nav-btn svg { width:18px; height:18px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nav-btn.active svg { stroke:#1A1816; }
.nav-btn:not(.active) svg { stroke:var(--surface-200); }
.nav-lbl { font-size:8px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.nav-btn.active .nav-lbl { color:#1A1816; }
.nav-btn:not(.active) .nav-lbl { color:var(--surface-200); }

/* ── Logo accent ── */
.logo-o { color:var(--primary); }

/* ── Card base ── */
.card {
  background:var(--bg-s1);
  border-radius:var(--r-lg);
  padding:16px;
  box-shadow:var(--sh-card);
}