/* ============================================
   Lock In: Grade Saver — Design Tokens
   "Kinetic Sanctuary" — deep navy tonal stack,
   sky-blue momentum, glass-morphism.
   ============================================ */

/* Material Symbols still loaded from Google — no local file for it */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Brand fonts — served locally from fonts/ */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Fonts ---- */
  --font-headline: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-label: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Primary · Sky Blue Momentum ---- */
  --color-primary: #8ed5ff;
  --color-primary-container: #38bdf8;
  --color-primary-fixed: #c4e7ff;
  --color-primary-fixed-dim: #7bd0ff;
  --color-on-primary: #00354a;
  --color-on-primary-container: #004965;

  /* ---- Secondary · Indigo Depth ---- */
  --color-secondary: #c0c1ff;
  --color-secondary-container: #3131c0;
  --color-secondary-fixed: #e1e0ff;
  --color-on-secondary: #1000a9;
  --color-on-secondary-container: #b0b2ff;

  /* ---- Tertiary · Amber Warmth ---- */
  --color-tertiary: #ffc176;
  --color-tertiary-container: #f1a02b;
  --color-on-tertiary: #472a00;
  --color-on-tertiary-container: #613b00;

  /* ---- Error · Coral ---- */
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error: #690005;
  --color-on-error-container: #ffdad6;

  /* ---- Surfaces · Deep Navy Tonal Stack ---- */
  --color-bg:                         #0b1326;
  --color-surface:                    #0b1326;
  --color-surface-container-lowest:   #060e20;
  --color-surface-container-low:      #131b2e;
  --color-surface-container:          #171f33;
  --color-surface-container-high:     #222a3d;
  --color-surface-container-highest:  #2d3449;
  --color-surface-bright:             #31394d;
  --color-surface-variant:            #2d3449;

  /* ---- Text ---- */
  --color-fg:                 #dae2fd;  /* on-surface / primary text */
  --color-fg-secondary:       #bdc8d1;  /* on-surface-variant */
  --color-fg-muted:           #87929a;  /* outline */
  --color-fg-faint:           #3e484f;  /* outline-variant */
  --color-on-surface:         #dae2fd;
  --color-on-surface-variant: #bdc8d1;

  /* ---- Semantic aliases ---- */
  --color-success:       var(--color-primary);
  --color-success-bg:    rgba(142, 213, 255, 0.12);
  --color-warning:       var(--color-tertiary);
  --color-warning-bg:    rgba(255, 193, 118, 0.12);
  --color-warning-dark:  var(--color-tertiary-container);
  --color-danger:        var(--color-error);
  --color-danger-bg:     rgba(255, 180, 171, 0.12);

  /* ---- Taxonomy colors (assignment categories) ---- */
  --color-formative:     #ffc176;  /* amber */
  --color-formative-bg:  rgba(255, 193, 118, 0.12);
  --color-practice:      #c0c1ff;  /* indigo */
  --color-practice-bg:   rgba(192, 193, 255, 0.12);
  --color-summative:     #8ed5ff;  /* sky */
  --color-summative-bg:  rgba(142, 213, 255, 0.12);

  /* ---- Radii ---- */
  --radius-sm:    0.5rem;   /* 8px   small chips, inputs */
  --radius:       0.75rem;  /* 12px  cards, buttons */
  --radius-lg:    1.25rem;  /* 20px  hero panels */
  --radius-pill:  9999px;   /* pills, tabs, toasts */

  /* ---- Shadows · tinted, never pure black ---- */
  --shadow-sm:           0 2px 8px rgba(6, 14, 32, 0.3);
  --shadow-md:           0 4px 20px rgba(6, 14, 32, 0.4);
  --shadow-lg:           0 20px 40px rgba(6, 14, 32, 0.4);
  --shadow-xl:           0 16px 48px rgba(6, 14, 32, 0.5);
  --shadow-glow:         0 0 20px rgba(142, 213, 255, 0.15);
  --shadow-accent-glow:  0 0 20px rgba(192, 193, 255, 0.20);
  --shadow-momentum:     0 4px 16px rgba(56, 189, 248, 0.25);

  /* ---- Glass ---- */
  --glass-bg:    rgba(45, 52, 73, 0.70);
  --glass-dim:   rgba(34, 42, 61, 0.80);
  --glass-blur:  blur(16px);

  /* ---- Spacing ramp (4px base) ---- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 */

  /* ---- Typography scale ---- */
  --fs-display:  3.5rem;   /* 56px  marketing H1 */
  --fs-h1:       2.25rem;  /* 36px  section headers */
  --fs-h2:       1.75rem;  /* 28px */
  --fs-h3:       1.125rem; /* 18px */
  --fs-lead:     1.125rem; /* 18px  hero subhead */
  --fs-body:     1rem;     /* 16px */
  --fs-sm:       0.875rem; /* 14px */
  --fs-xs:       0.75rem;  /* 12px */
  --fs-label:    0.6875rem;/* 11px  uppercase labels */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    0.15s;
  --dur:         0.2s;
  --dur-slow:    0.3s;
}

/* ============================================
   Semantic type styles
   ============================================ */

.ds-display {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

.ds-h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

.ds-h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.ds-h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-fg);
}

.ds-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-fg-secondary);
}

.ds-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-fg);
}

.ds-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-fg-secondary);
}

.ds-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--color-fg-secondary);
}

.ds-wordmark {
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.ds-wordmark .brand-dot { color: var(--color-secondary); }

.ds-numeric {
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ds-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}