/* Stride Design System — CSS Custom Properties */

:root {
  /* ── Colour: Primary ── */
  --color-stride-blue:  #2E7FB8;
  --color-deep-blue:    #1A5F8A;
  --color-sky-blue:     #5BA3D0;
  --color-pale-blue:    #D6EAF5;

  /* ── Colour: Neutral ── */
  --color-charcoal:     #3D3D3D;
  --color-slate:        #5A5A5A;
  --color-ash:          #8C8C8C;
  --color-mist:         #C4C4C4;
  --color-ghost:        #EFEFEF;
  --color-white:        #FFFFFF;

  /* ── Colour: Semantic ── */
  --color-amber:        #F5A623;
  --color-amber-light:  #FEF3DC;
  --color-amber-dark:   #A06B10;
  --color-green:        #27AE60;
  --color-green-light:  #D5F2E3;
  --color-red:          #E74C3C;
  --color-red-light:    #FDECEA;

  /* ── Colour: Streak states ── */
  --color-streak-active:    #F5A623;
  --color-streak-at-risk:   #E74C3C;
  --color-streak-completed: #27AE60;
  --color-streak-inactive:  #C4C4C4;

  /* ── Colour: Roles (light) ── */
  --bg-page:            #F5F8FB;
  --bg-surface:         #FFFFFF;
  --bg-surface-raised:  #FFFFFF;
  --border-default:     #E2E8EE;
  /* Aliases used by screens.css (were undefined → transparent) */
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F5F8FB;
  --border-active:      #2E7FB8;
  --text-primary:       #3D3D3D;
  --text-secondary:     #5A5A5A;
  --text-muted:         #6F6F6F;
  --text-on-blue:       #FFFFFF;
  --action-primary:     #2E7FB8;
  --action-primary-hover: #1A5F8A;

  /* ── Colour: Pillars ── */
  --pillar-technical-bg:   #D6EAF5;
  --pillar-technical-text: #1A5F8A;
  --pillar-leadership-bg:  #E8D5F5;
  --pillar-leadership-text:#6B3FA0;
  --pillar-community-bg:   #D5F2E3;
  --pillar-community-text: #1A7A45;
  --pillar-creative-bg:    #FEF3DC;
  --pillar-creative-text:  #A06B10;
  --pillar-research-bg:    #DCF0FE;
  --pillar-research-text:  #0A5A8A;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  clamp(28px, 2.4vw, 32px);
  --space-10: clamp(32px, 3.2vw, 40px);
  --space-12: clamp(36px, 4vw, 48px);

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:     0 1px 3px rgba(20,30,45,0.06);
  --shadow-md:     0 4px 12px rgba(20,30,45,0.10);
  --shadow-lg:     0 8px 24px rgba(20,30,45,0.14);
  --shadow-blue:   0 4px 16px rgba(46,127,184,0.32);
  --shadow-streak: 0 4px 14px rgba(245,166,35,0.30);
  --shadow-streak-risk: 0 4px 14px rgba(231,76,60,0.32);

  /* ── Motion ── */
  --motion-fast:   120ms ease-out;
  --motion-base:   200ms ease-in-out;
  --motion-slow:   350ms ease-in-out;
  --motion-draft:  400ms ease-out;
  --motion-streak: 550ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Typography (fluid) ── */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-display: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
  --fs-h1:      clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --fs-h2:      clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-h3:      clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-label:   0.875rem;
  --fs-caption: 0.8125rem;
  --fs-draft:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  /* ── Responsive container width (single-column, scales up) ── */
  --container-w: 92vw;

  /* ── Wide dashboard width (Home/Draft/Published/Collab/Admin desktop grids) ── */
  --dashboard-w: 96vw;

  /* ── Glassmorphism ── */
  --glass-surface:    rgba(237,245,253,0.64);
  --glass-surface-strong: rgba(237,245,253,0.84);
  --glass-border:     rgba(255,255,255,0.65);
  --glass-highlight:  rgba(255,255,255,0.8);
  --glass-blur:       22px;
  --glass-blur-sm:    14px;
  --glass-shadow:     0 12px 40px rgba(31,45,61,0.15);

  /* ── Ambient gradient blobs ── */
  --blob-1: #2E7FB8;
  --blob-2: #5BA3D0;
  --blob-3: #8E44AD;
  --blob-4: #F5A623;
  --blob-opacity: 0.58;

  /* ── Landing page background — locked to one blue/teal hue family ── */
  --landing-bg-1: #EFF8FA;
  --landing-bg-2: #DCEEFA;
  --landing-bg-3: #C7E2F4;
}

/* ── Breakpoints: container grows, stays single column ── */
@media (min-width: 600px)  { :root { --container-w: 85vw; } }
@media (min-width: 900px)  { :root { --container-w: 75vw; } }
@media (min-width: 1200px) { :root { --container-w: 60vw; } }

/* ── Breakpoints: dashboard width (Home/Draft/Published/Collab/Admin) ── */
@media (min-width: 600px)  { :root { --dashboard-w: 92vw; } }
@media (min-width: 900px)  { :root { --dashboard-w: 96vw; } }
@media (min-width: 1200px) { :root { --dashboard-w: 98vw; } }
@media (min-width: 1600px) { :root { --dashboard-w: 100vw; } }

/* ─────────────────────────────────────────
   DARK MODE — same role tokens, dark values
───────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-page:            #0F1317;
  --bg-surface:         #1A2028;
  --bg-surface-raised:  #212930;
  --border-default:     #2A343E;
  --border-active:      #5BA3D0;
  --text-primary:       #F8FAFC;
  --text-secondary:     #B8C6D6;
  --text-muted:         #A1B0C0;
  --action-primary:     #5BA3D0;
  --action-primary-hover: #2E7FB8;
  --color-background-primary:   #1A2028;
  --color-background-secondary: #0F1317;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.40);
  --shadow-lg:  0 10px 28px rgba(0,0,0,0.45);

  --glass-surface:    rgba(24,32,44,0.7);
  --glass-surface-strong: rgba(24,32,44,0.88);
  --glass-border:     rgba(255,255,255,0.14);
  --glass-highlight:  rgba(255,255,255,0.08);
  --glass-shadow:     0 12px 40px rgba(0,0,0,0.7);

  --landing-bg-1: #0D1A22;
  --landing-bg-2: #11222E;
  --landing-bg-3: #16303F;

  --blob-opacity: 0.42;
}