/* ==========================================================================
   SkillStreet — Design Tokens
   Source: design.md Appendix A (+ §3 themes, §4 shadows, §6 categories, §7 tiers)
   Every color, shadow, radius, and spacing value in the app resolves here.
   ========================================================================== */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale (design.md §1) — sizes; line-heights/weights applied in base.css */
  --text-display: 28px; --text-h1: 22px; --text-h2: 18px; --text-h3: 16px;
  --text-body: 15px; --text-body-sm: 13px; --text-caption: 12px;

  --lh-display: 34px; --lh-h1: 28px; --lh-h2: 24px; --lh-h3: 22px;
  --lh-body: 22px; --lh-body-sm: 18px; --lh-caption: 16px;

  /* Spacing (design.md §2) */
  --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;
  --space-pill-gap: 6px;

  /* Component dimensions */
  --sidebar-width: 260px;
  --sidebar-rail-width: 72px;
  --topbar-height: 72px;
  --bottom-nav-height: 76px;
  --touch-target: 44px;
  --icon-badge-size: 44px;
  --icon-badge-sm-size: 36px;
  --badge-tier-size: 56px;
  --badge-tier-lg-size: 88px;
  --badge-tile-min: 130px;
  --corps-mini-badge-size: 20px;
  --tile-icon-btn-size: 28px;
  --share-card-badge-size: 96px;
  --messages-shell-height: 620px;
  --messages-list-width: 320px;
  --avatar-32: 32px;
  --avatar-40: 40px;
  --avatar-48: 48px;
  --avatar-64: 64px;
  --modal-max-width: 560px;
  --toast-width: 360px;
  --content-max-width: 100%;
  --screen-card-min: 240px;
  --metric-card-min: 160px;
  --stream-card-min: 250px;
  --quest-card-min: 260px;
  --challenge-card-min: 320px;
  --xp-tooltip-width: 260px;
  --module-detail-width: 320px;
  --course-media-height: 140px;
  --course-sidebar-width: 300px;
  --course-player-min-height: 480px;
  --dash-side-min: 360px;
  --dash-side-max: 440px;
  --dash-tile-min: 210px;
  --dash-learn-min: 260px;
  --dash-todo-row-height: 64px;
  --dash-todo-max-height: calc((var(--dash-todo-row-height) * 3) + (var(--space-2) * 2));
  --dash-rank-size: 28px;
  --dash-meter-height: var(--space-1);
  --meter-height: var(--space-1);
  --view-slide: 12px;
  --toast-accent-width: 4px;
  --button-pad-y: 10px;
  --button-pad-x: 20px;
  --button-sm-pad-y: 8px;
  --button-sm-pad-x: 14px;
  --pill-pad-x: 10px;
  --scrollbar-size: 10px;
  --scrollbar-inset: 2px;
  --scrollbar-min-thumb: 40px;
  --scrollbar-track: color-mix(in srgb, var(--surface-alt) 72%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--text-muted) 54%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent) 68%, var(--text-muted));
  --border-width: 1px;
  --focus-ring-width: 2px;
  --placeholder-max-width: 640px;

  /* Motion system (motion.md) */
  --motion-duration-instant: 90ms;
  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 360ms;
  --motion-duration-slower: 520ms;
  --motion-duration-reduced: 1ms;
  --motion-ease-standard: cubic-bezier(0.20, 0.00, 0.00, 1.00);
  --motion-ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --motion-ease-in: cubic-bezier(0.32, 0.00, 0.67, 0.00);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --motion-scale-press: 0.985;
  --motion-scale-enter: 0.96;
  --motion-distance-2xs: 2px;
  --motion-distance-xs: 4px;
  --motion-distance-sm: 8px;
  --motion-distance-md: 12px;
  --motion-distance-lg: 20px;

  /* Radius (design.md §2) */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --radius-pill: 999px; --radius-badge: 14px;

  /* Breakpoints (reference — used literally in @media queries, which cannot
     read custom properties) */
  --bp-mobile: 640px; --bp-tablet: 1024px;

  /* Category palette (design.md §6.1) — 8 hues, constant across all themes */
  --cat-blue-rgb:   59, 130, 214;
  --cat-purple-rgb: 139, 111, 224;
  --cat-teal-rgb:   31, 169, 138;
  --cat-coral-rgb:  224, 105, 63;
  --cat-pink-rgb:   224, 97, 158;
  --cat-gold-rgb:   212, 167, 44;
  --cat-green-rgb:  76, 154, 76;
  --cat-gray-rgb:   107, 114, 128;

  /* Gamification badge-tier gradient stops (design.md §7) — theme-constant */
  --tier-1-base: #9CA3AF; --tier-1-from: #E5E7EB; --tier-1-to: #9CA3AF;
  --tier-2-base: #60A5FA; --tier-2-from: #DBEAFE; --tier-2-to: #3B82F6;
  --tier-3-base: #34D399; --tier-3-from: #D1FAE5; --tier-3-to: #10B981;
  --tier-4-base: #FBBF24; --tier-4-from: #FEF3C7; --tier-4-to: #F59E0B;
  --tier-5-base: #FB923C; --tier-5-from: #FFEDD5; --tier-5-to: #EA580C;
  --tier-6-base: #F472B6; --tier-6-from: #FCE7F3; --tier-6-to: #DB2777;
  --tier-7-base: #A78BFA; --tier-7-from: #EDE9FE; --tier-7-to: #7C3AED;

  /* Modal overlay — constant across themes (design.md §8.8) */
  --overlay: rgba(0, 0, 0, 0.45);
  --danger-contrast: #FFFFFF;
}

/* ==========================================================================
   Light theme (design.md §3.1) — cool neutrals, SaaS blue accent
   ========================================================================== */
[data-theme="light"] {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-alt: #F1F3F6;
  --surface-sunken: #E9ECF1;
  --border: #E4E7EC;
  --border-strong: #D0D5DD;

  --text-primary: #101828;
  --text-secondary: #475467;
  --text-muted: #98A2B3;

  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-active: #1E40AF;
  --accent-tint: #EBF0FE;
  --accent-contrast: #FFFFFF;

  --success: #16A34A;   --success-tint: #E8F7EE;
  --warning: #D97706;   --warning-tint: #FCF1DF;
  --danger:  #DC2626;   --danger-tint:  #FDE8E8;

  --shadow-rgb: 16, 24, 40;

  /* Elevation (design.md §4 — light recipe) */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.04);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.04),
               0 2px 6px rgba(var(--shadow-rgb), 0.05);
  --shadow-md: 0 2px 4px rgba(var(--shadow-rgb), 0.05),
               0 8px 20px rgba(var(--shadow-rgb), 0.07);
  --shadow-lg: 0 4px 10px rgba(var(--shadow-rgb), 0.08),
               0 20px 40px rgba(var(--shadow-rgb), 0.12);
  --badge-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.62),
                 inset 0 -1px 0 rgba(var(--shadow-rgb), 0.08);

  /* Icon-badge tint alpha (design.md §6) */
  --badge-alpha: 0.12;
}

/* ==========================================================================
   Dark theme (design.md §3.2) — blue-slate neutrals, same blue family
   ========================================================================== */
[data-theme="dark"] {
  --bg: #0D1117;
  --surface: #161C26;
  --surface-alt: #1E2633;
  --surface-sunken: #0A0E14;
  --border: #262F3D;
  --border-strong: #364152;

  --text-primary: #F0F4F8;
  --text-secondary: #A8B3C4;
  --text-muted: #6C7A8E;

  --accent: #5B96F7;
  --accent-hover: #7DACF9;
  --accent-active: #4784EA;
  --accent-tint: #182A47;
  --accent-contrast: #0B1526;

  --success: #3FD68F;   --success-tint: #10291F;
  --warning: #FBBF24;   --warning-tint: #2E2712;
  --danger:  #F87171;   --danger-tint:  #331717;

  --shadow-rgb: 0, 0, 0;

  /* Elevation (design.md §4 — dark/green recipe) */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.30);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.30),
               0 2px 8px rgba(var(--shadow-rgb), 0.25);
  --shadow-md: 0 4px 12px rgba(var(--shadow-rgb), 0.35);
  --shadow-lg: 0 10px 30px rgba(var(--shadow-rgb), 0.45);
  --badge-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                 inset 0 -1px 0 rgba(var(--shadow-rgb), 0.24);

  --badge-alpha: 0.18;
}

/* ==========================================================================
   Nigeria Green theme (design.md §3.3) — LIGHT theme, green-tinted
   surfaces, Nigerian flag-green accent
   ========================================================================== */
[data-theme="naija-green"] {
  --bg: #F3F9F4;
  --surface: #FFFFFF;
  --surface-alt: #EAF4EC;
  --surface-sunken: #E0EEE4;
  --border: #D8E8DC;
  --border-strong: #BCD6C4;

  --text-primary: #14261B;
  --text-secondary: #46604F;
  --text-muted: #7E9486;

  --accent: #008751;
  --accent-hover: #007144;
  --accent-active: #005B37;
  --accent-tint: #DFF2E8;
  --accent-contrast: #FFFFFF;

  --success: #0E9F6E;   --success-tint: #DFF3EA;
  --warning: #C77414;   --warning-tint: #FAF0DA;
  --danger:  #DC2626;   --danger-tint:  #FBE5E5;

  --shadow-rgb: 16, 40, 26;

  /* Elevation (design.md §4 — light recipe, green-cast shadows) */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.04);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.04),
               0 2px 6px rgba(var(--shadow-rgb), 0.05);
  --shadow-md: 0 2px 4px rgba(var(--shadow-rgb), 0.05),
               0 8px 20px rgba(var(--shadow-rgb), 0.07);
  --shadow-lg: 0 4px 10px rgba(var(--shadow-rgb), 0.08),
               0 20px 40px rgba(var(--shadow-rgb), 0.12);
  --badge-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.62),
                 inset 0 -1px 0 rgba(var(--shadow-rgb), 0.08);

  --badge-alpha: 0.12;
}

/* ==========================================================================
   Category classes — set --cat-rgb; components derive fill/icon from it
   (design.md §6: fill = category at low alpha over surface, icon = solid)
   ========================================================================== */
.cat-blue   { --cat-rgb: var(--cat-blue-rgb); }
.cat-purple { --cat-rgb: var(--cat-purple-rgb); }
.cat-teal   { --cat-rgb: var(--cat-teal-rgb); }
.cat-coral  { --cat-rgb: var(--cat-coral-rgb); }
.cat-pink   { --cat-rgb: var(--cat-pink-rgb); }
.cat-gold   { --cat-rgb: var(--cat-gold-rgb); }
.cat-green  { --cat-rgb: var(--cat-green-rgb); }
.cat-gray   { --cat-rgb: var(--cat-gray-rgb); }

[class*="cat-"] {
  --badge-fill: rgba(var(--cat-rgb), var(--badge-alpha));
  --badge-icon: rgb(var(--cat-rgb));
}

/* Accent category (Dashboard, Onboarding, National Dashboard) uses the
   theme's own brand color rather than a fixed hue */
.cat-accent {
  --badge-fill: var(--accent-tint);
  --badge-icon: var(--accent);
}

/* Community Projects is Green, but in Nigeria Green mode it sits too close
   to the theme accent — swap to Teal there (design.md §3.3 note) */
[data-theme="naija-green"] .cat-green.cat-swap-naija {
  --cat-rgb: var(--cat-teal-rgb);
}