/* ===============================================
   EduLinked design tokens (generated file)
   Source: design-system/tokens/*.json
   Do not edit this file manually.
   =============================================== */

:root {
  --focus-ring-width: 3px;
  --focus-ring-style: solid;
  --focus-ring-color: var(--color-focus-ring);
  --focus-ring-offset: 2px;
}

:root {
  --space-none: 0rem;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-00: var(--space-none);
  --space-04: var(--space-3xs);
  --space-08: var(--space-2xs);
  --space-12: var(--space-xs);
  --space-16: var(--space-sm);
  --space-20: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);
  --space-24: var(--space-md);
  --space-32: var(--space-lg);
  --space-40: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  --space-48: var(--space-xl);
  --space-64: var(--space-2xl);
  --space-96: var(--space-3xl);
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 999px;
  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-full: var(--radius-full);
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(15, 36, 64, 0.12);
  --shadow-md: 0 4px 12px rgba(15, 36, 64, 0.14);
  --shadow-lg: 0 8px 24px rgba(15, 36, 64, 0.16);
  --shadow-xl: 0 16px 40px rgba(15, 36, 64, 0.18);
  --shadow-soft: var(--shadow-md);
  --shadow-card: var(--shadow-lg);
  --shadow-elevated: var(--shadow-xl);
  --gradient-brand-rainbow: linear-gradient(98deg, #6EE7B7 0%, #22D3EE 25%, #3B82F6 55%, #A855F7 78%, #F97316 100%);
  --rainbow-gradient: var(--gradient-brand-rainbow);
  --motion-duration-instant: 0s;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-moderate: 250ms;
  --motion-duration-slow: 350ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --motion-easing-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --z-index-base: 0;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-overlay: 400;
  --z-index-dialog: 500;
  --z-index-popover: 600;
  --z-index-toast: 700;
  --z-index-modal: 800;
  --z-index-max: 2147483647;
  --font-family-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-secondary: "Poppins", "Inter", system-ui, sans-serif;
  --font-family-easy-read: "Atkinson Hyperlegible", "Inter", system-ui, sans-serif;
  --font-family-mono: "Source Code Pro", "Fira Code", "SFMono-Regular", monospace;
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.4vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.82rem + 0.35vw, 0.9375rem);
  --font-size-md: 1rem;
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.45vw, 1.25rem);
  --font-size-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --font-size-2xl: clamp(1.75rem, 1.55rem + 0.8vw, 2.125rem);
  --font-size-3xl: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem);
  --font-size-4xl: clamp(2.75rem, 2.4rem + 1.6vw, 3.5rem);
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.8;
  --line-height-loose: 2.1;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

:root, :root[data-theme="light"], [data-theme="light"] {
  --color-mode: light;
  color-scheme: light;
  --color-surface: #f8fafc;
  --color-surface-muted: #eef2ff;
  --color-surface-elevated: #ffffff;
  --color-surface-inverse: #0b1220;
  --color-surface-backdrop: rgba(8, 19, 38, 0.72);
  --color-border: #c7d2fe;
  --color-border-strong: #94a3d5;
  --color-text: #152446;
  --color-text-muted: #394867;
  --color-text-subtle: #506083;
  --color-text-inverse: #f8fafc;
  --color-text-on-brand: #ffffff;
  --color-brand: #3558ff;
  --color-brand-strong: #2441dd;
  --color-brand-soft: #e3e8ff;
  --color-accent: #0ea5e9;
  --color-accent-strong: #0284c7;
  --color-success: #059669;
  --color-warning: #b45309;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --color-focus-ring: #3b82f6;
  --color-link: #1d4ed8;
  --color-link-hover: #1e3a8a;
  --color-link-visited: #6b21a8;
  --color-skeleton: #e2e8f0;
  --color-white: var(--color-surface-elevated);
  --color-neutral-dark: var(--color-text-on-brand);
  --color-navy-50: var(--color-surface-muted);
  --color-navy-100: var(--color-border);
  --color-navy-500: var(--color-brand);
  --color-navy-600: var(--color-brand-strong);
  --color-navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
  --color-navy-800: var(--color-text-muted);
  --color-navy-900: var(--color-text);
  --color-navy-950: var(--color-text-on-brand);
  --color-el-blue: var(--color-focus-ring);
  --color-card-border: var(--color-border);
  --color-aac-card-bg: var(--color-surface-elevated);
  --color-aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --color-focus-ring: var(--color-focus-ring);
  --color-aac-symbol-accent: var(--color-brand);
  --color-button-text: var(--color-text-on-brand);
  --color-button-surface: var(--color-brand);
  --color-button-surface-alt: var(--color-surface-elevated);
  --color-chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
  --color-chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --color-skeleton: var(--color-skeleton);
  --white: var(--color-surface-elevated);
  --neutral-dark: var(--color-text-on-brand);
  --navy-50: var(--color-surface-muted);
  --navy-100: var(--color-border);
  --navy-500: var(--color-brand);
  --navy-600: var(--color-brand-strong);
  --navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
  --navy-800: var(--color-text-muted);
  --navy-900: var(--color-text);
  --navy-950: var(--color-text-on-brand);
  --el-blue: var(--color-focus-ring);
  --card-border: var(--color-border);
  --aac-card-bg: var(--color-surface-elevated);
  --aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --focus-ring: var(--color-focus-ring);
  --aac-symbol-accent: var(--color-brand);
  --button-text: var(--color-text-on-brand);
  --button-surface: var(--color-brand);
  --button-surface-alt: var(--color-surface-elevated);
  --chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
  --chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --skeleton: var(--color-skeleton);
  --focus-ring-color: var(--color-focus-ring);
}

:root[data-theme="dark"], [data-theme="dark"] {
  --color-mode: dark;
  color-scheme: dark;
  --color-surface: #0b1220;
  --color-surface-muted: #111a2f;
  --color-surface-elevated: #172442;
  --color-surface-inverse: #f8fafc;
  --color-surface-backdrop: rgba(8, 19, 38, 0.8);
  --color-border: #293657;
  --color-border-strong: #3e4f78;
  --color-text: #e2e8f0;
  --color-text-muted: #cbd5f5;
  --color-text-subtle: #94a3d5;
  --color-text-inverse: #0b1220;
  --color-text-on-brand: #0b1220;
  --color-brand: #84a2ff;
  --color-brand-strong: #a5bfff;
  --color-brand-soft: #1a274a;
  --color-accent: #38bdf8;
  --color-accent-strong: #0ea5e9;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #60a5fa;
  --color-focus-ring: #60a5fa;
  --color-link: #93c5fd;
  --color-link-hover: #bfdbfe;
  --color-link-visited: #c4b5fd;
  --color-skeleton: #1f2a44;
  --color-white: var(--color-surface-elevated);
  --color-neutral-dark: var(--color-text-on-brand);
  --color-navy-50: var(--color-surface-muted);
  --color-navy-100: var(--color-border);
  --color-navy-500: var(--color-brand);
  --color-navy-600: var(--color-brand-strong);
  --color-navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
  --color-navy-800: var(--color-text-muted);
  --color-navy-900: var(--color-text);
  --color-navy-950: var(--color-text-on-brand);
  --color-el-blue: var(--color-focus-ring);
  --color-card-border: var(--color-border);
  --color-aac-card-bg: var(--color-surface-elevated);
  --color-aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --color-focus-ring: var(--color-focus-ring);
  --color-aac-symbol-accent: var(--color-brand);
  --color-button-text: var(--color-text-on-brand);
  --color-button-surface: var(--color-brand);
  --color-button-surface-alt: var(--color-surface-elevated);
  --color-chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
  --color-chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --color-skeleton: var(--color-skeleton);
  --white: var(--color-surface-elevated);
  --neutral-dark: var(--color-text-on-brand);
  --navy-50: var(--color-surface-muted);
  --navy-100: var(--color-border);
  --navy-500: var(--color-brand);
  --navy-600: var(--color-brand-strong);
  --navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
  --navy-800: var(--color-text-muted);
  --navy-900: var(--color-text);
  --navy-950: var(--color-text-on-brand);
  --el-blue: var(--color-focus-ring);
  --card-border: var(--color-border);
  --aac-card-bg: var(--color-surface-elevated);
  --aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --focus-ring: var(--color-focus-ring);
  --aac-symbol-accent: var(--color-brand);
  --button-text: var(--color-text-on-brand);
  --button-surface: var(--color-brand);
  --button-surface-alt: var(--color-surface-elevated);
  --chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
  --chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --skeleton: var(--color-skeleton);
  --focus-ring-color: var(--color-focus-ring);
}

:root:not([data-theme]) {
  --color-mode: light;
  color-scheme: light;
  --color-surface: #f8fafc;
  --color-surface-muted: #eef2ff;
  --color-surface-elevated: #ffffff;
  --color-surface-inverse: #0b1220;
  --color-surface-backdrop: rgba(8, 19, 38, 0.72);
  --color-border: #c7d2fe;
  --color-border-strong: #94a3d5;
  --color-text: #152446;
  --color-text-muted: #394867;
  --color-text-subtle: #506083;
  --color-text-inverse: #f8fafc;
  --color-text-on-brand: #ffffff;
  --color-brand: #3558ff;
  --color-brand-strong: #2441dd;
  --color-brand-soft: #e3e8ff;
  --color-accent: #0ea5e9;
  --color-accent-strong: #0284c7;
  --color-success: #059669;
  --color-warning: #b45309;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --color-focus-ring: #3b82f6;
  --color-link: #1d4ed8;
  --color-link-hover: #1e3a8a;
  --color-link-visited: #6b21a8;
  --color-skeleton: #e2e8f0;
  --color-white: var(--color-surface-elevated);
  --color-neutral-dark: var(--color-text-on-brand);
  --color-navy-50: var(--color-surface-muted);
  --color-navy-100: var(--color-border);
  --color-navy-500: var(--color-brand);
  --color-navy-600: var(--color-brand-strong);
  --color-navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
  --color-navy-800: var(--color-text-muted);
  --color-navy-900: var(--color-text);
  --color-navy-950: var(--color-text-on-brand);
  --color-el-blue: var(--color-focus-ring);
  --color-card-border: var(--color-border);
  --color-aac-card-bg: var(--color-surface-elevated);
  --color-aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --color-focus-ring: var(--color-focus-ring);
  --color-aac-symbol-accent: var(--color-brand);
  --color-button-text: var(--color-text-on-brand);
  --color-button-surface: var(--color-brand);
  --color-button-surface-alt: var(--color-surface-elevated);
  --color-chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
  --color-chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --color-skeleton: var(--color-skeleton);
  --white: var(--color-surface-elevated);
  --neutral-dark: var(--color-text-on-brand);
  --navy-50: var(--color-surface-muted);
  --navy-100: var(--color-border);
  --navy-500: var(--color-brand);
  --navy-600: var(--color-brand-strong);
  --navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
  --navy-800: var(--color-text-muted);
  --navy-900: var(--color-text);
  --navy-950: var(--color-text-on-brand);
  --el-blue: var(--color-focus-ring);
  --card-border: var(--color-border);
  --aac-card-bg: var(--color-surface-elevated);
  --aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --focus-ring: var(--color-focus-ring);
  --aac-symbol-accent: var(--color-brand);
  --button-text: var(--color-text-on-brand);
  --button-surface: var(--color-brand);
  --button-surface-alt: var(--color-surface-elevated);
  --chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
  --chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --skeleton: var(--color-skeleton);
  --focus-ring-color: var(--color-focus-ring);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-mode: dark;
    color-scheme: dark;
    --color-surface: #0b1220;
    --color-surface-muted: #111a2f;
    --color-surface-elevated: #172442;
    --color-surface-inverse: #f8fafc;
    --color-surface-backdrop: rgba(8, 19, 38, 0.8);
    --color-border: #293657;
    --color-border-strong: #3e4f78;
    --color-text: #e2e8f0;
    --color-text-muted: #cbd5f5;
    --color-text-subtle: #94a3d5;
    --color-text-inverse: #0b1220;
    --color-text-on-brand: #0b1220;
    --color-brand: #84a2ff;
    --color-brand-strong: #a5bfff;
    --color-brand-soft: #1a274a;
    --color-accent: #38bdf8;
    --color-accent-strong: #0ea5e9;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #60a5fa;
    --color-focus-ring: #60a5fa;
    --color-link: #93c5fd;
    --color-link-hover: #bfdbfe;
    --color-link-visited: #c4b5fd;
    --color-skeleton: #1f2a44;
    --color-white: var(--color-surface-elevated);
    --color-neutral-dark: var(--color-text-on-brand);
    --color-navy-50: var(--color-surface-muted);
    --color-navy-100: var(--color-border);
    --color-navy-500: var(--color-brand);
    --color-navy-600: var(--color-brand-strong);
    --color-navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
    --color-navy-800: var(--color-text-muted);
    --color-navy-900: var(--color-text);
    --color-navy-950: var(--color-text-on-brand);
    --color-el-blue: var(--color-focus-ring);
    --color-card-border: var(--color-border);
    --color-aac-card-bg: var(--color-surface-elevated);
    --color-aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
    --color-focus-ring: var(--color-focus-ring);
    --color-aac-symbol-accent: var(--color-brand);
    --color-button-text: var(--color-text-on-brand);
    --color-button-surface: var(--color-brand);
    --color-button-surface-alt: var(--color-surface-elevated);
    --color-chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
    --color-chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
    --color-skeleton: var(--color-skeleton);
    --white: var(--color-surface-elevated);
    --neutral-dark: var(--color-text-on-brand);
    --navy-50: var(--color-surface-muted);
    --navy-100: var(--color-border);
    --navy-500: var(--color-brand);
    --navy-600: var(--color-brand-strong);
    --navy-700: color-mix(in srgb, var(--color-brand) 65%, var(--color-text) 35%);
    --navy-800: var(--color-text-muted);
    --navy-900: var(--color-text);
    --navy-950: var(--color-text-on-brand);
    --el-blue: var(--color-focus-ring);
    --card-border: var(--color-border);
    --aac-card-bg: var(--color-surface-elevated);
    --aac-symbol-bg: color-mix(in srgb, var(--color-brand) 18%, transparent);
    --focus-ring: var(--color-focus-ring);
    --aac-symbol-accent: var(--color-brand);
    --button-text: var(--color-text-on-brand);
    --button-surface: var(--color-brand);
    --button-surface-alt: var(--color-surface-elevated);
    --chip-bg: color-mix(in srgb, var(--color-brand-soft) 65%, transparent);
    --chip-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
    --skeleton: var(--color-skeleton);
    --focus-ring-color: var(--color-focus-ring);
  }
}