/* ─── Self-hosted fonts ───────────────────────────────────────────────────────
   Latin-only subsets of the same two faces the marketing site uses (Inter body,
   Space Grotesk display) — trimmed from the render-blocking Google Fonts CDN
   request (2 families × 11 weights) down to the 7 files actually used, served
   from this origin so there's no cross-origin font fetch at all. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Inter-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/Inter-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/Inter-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Inter-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/Inter-800-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/SpaceGrotesk-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/SpaceGrotesk-700-latin.woff2') format('woff2'); }

/* ─── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* brand anchor — unchanged from the marketing site umbrella this docs site
     lives under; the revamp earns distinctiveness through craft, not by
     discarding the identity crewsense.in's nav/footer already carry here */
  --primary:      #2E86C1;
  --primary-dark: #1A6A9E;
  --primary-glow: rgba(46,134,193,0.22);
  --green:        #10B981;
  --amber:        #F59E0B;
  --red:          #EF4444;

  /* semantic surface layer (was one flat --surface before) */
  --bg:           #F8FAFF;
  --surface-1:    #FFFFFF;
  --surface-2:    #EDF2FB;
  --surface-3:    #E2EBFA;
  --card:         #FFFFFF;
  --border:       rgba(46,134,193,0.13);
  --border-hover: rgba(46,134,193,0.30);

  --text:         #0A1628;
  --subtext:      #4B607A;
  --muted:        #8FA3BA;

  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --shadow-card:  0 2px 16px rgba(46,134,193,0.09), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-glow:  0 0 60px rgba(46,134,193,0.12);

  /* spacing scale — replaces last redesign's arbitrary px literals */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* category accents — promoted from inline style="" hex on every icon tile
     to one named property per category, so a color exists in exactly one place */
  --cat-getting-started: #2E86C1;
  --cat-projects:        #059669;
  --cat-people:          #F59E0B;
  --cat-materials:       #0891B2;
  --cat-equipment:       #EA580C;
  --cat-money:           #10B981;
  --cat-ai-insights:     #8B5CF6;
  --cat-client:          #DB2777;
  --cat-admin:           #6366F1;
  --cat-security:        #EF4444;

  /* plan-tier badge colors — every one of the 5 fixed variants defined here,
     unlike before where 4 of 10 category hexes were missing from the CSS
     entirely and Growth+/Professional+ shared one undifferentiated style */
  --tier-all-bg:     rgba(16,185,129,0.10);  --tier-all-fg:     #0d9668;   --tier-all-bd:     rgba(16,185,129,0.28);
  --tier-growth-bg:  rgba(46,134,193,0.10);  --tier-growth-fg:  var(--primary-dark); --tier-growth-bd: rgba(46,134,193,0.28);
  --tier-pro-bg:     rgba(124,58,237,0.10);  --tier-pro-fg:     #6d28d9;   --tier-pro-bd:     rgba(124,58,237,0.28);
  --tier-ent-bg:     rgba(139,92,246,0.12);  --tier-ent-fg:     #7c3aed;  --tier-ent-bd:     rgba(139,92,246,0.30);
  --tier-soon-bg:    rgba(143,163,186,0.16); --tier-soon-fg:    #64748b;   --tier-soon-bd:    rgba(143,163,186,0.32);
}

/* ─── Dark mode ───────────────────────────────────────────────────────────────
   Redefines only the token layer — every component below is written against
   these variables, never a literal color, so this block is the entire theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0B1420;
    --surface-1:    #10192A;
    --surface-2:    #16233A;
    --surface-3:    #1D2C46;
    --card:         #121D30;
    --border:       rgba(93,163,214,0.18);
    --border-hover: rgba(93,163,214,0.36);

    --text:         #EAF1FB;
    --subtext:      #9FB3CC;
    --muted:        #6E84A0;

    --primary:      #5CA8DD;
    --primary-dark: #7FC0EE;
    --primary-glow: rgba(92,168,221,0.28);
    --shadow-card:  0 2px 20px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.25);
    --shadow-glow:  0 0 60px rgba(92,168,221,0.16);

    --tier-all-bg:    rgba(16,185,129,0.16); --tier-all-fg:    #3ddca0;
    --tier-growth-bg: rgba(92,168,221,0.16); --tier-growth-fg: #8fd0ff;
    --tier-pro-bg:    rgba(167,139,250,0.18); --tier-pro-fg:   #c4b1fb;
    --tier-ent-bg:    rgba(167,139,250,0.22); --tier-ent-fg:   #d7c9ff;
    --tier-soon-bg:   rgba(143,163,186,0.16); --tier-soon-fg:  #a9bbd2;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}