/* OSEKOO Academy design tokens v1.0.0: primitive -> semantic -> component. */
:root {
  /* Primitive color palette. */
  --osekoo-blue-50: #eff6ff;
  --osekoo-blue-100: #dbeafe;
  --osekoo-blue-200: #bfdbfe;
  --osekoo-blue-300: #93c5fd;
  --osekoo-blue-500: #3b82f6;
  --osekoo-blue-600: #2563eb;
  --osekoo-blue-700: #1d4ed8;
  --osekoo-blue-800: #1e40af;
  --osekoo-navy-700: #1e3a5f;
  --osekoo-navy-800: #172554;
  --osekoo-navy-900: #0f2557;
  --osekoo-slate-25: #fbfcff;
  --osekoo-slate-50: #f8faff;
  --osekoo-slate-100: #f1f5f9;
  --osekoo-slate-200: #e2e8f0;
  --osekoo-slate-300: #cbd5e1;
  --osekoo-slate-400: #94a3b8;
  --osekoo-slate-500: #64748b;
  --osekoo-slate-600: #526077;
  --osekoo-slate-700: #334155;
  --osekoo-slate-800: #1e293b;
  --osekoo-slate-900: #0f172a;
  --osekoo-amber-50: #fffbeb;
  --osekoo-amber-600: #d97706;
  --osekoo-green-50: #ecfdf5;
  --osekoo-green-700: #047857;
  --osekoo-red-50: #fef2f2;
  --osekoo-red-200: #fecaca;
  --osekoo-red-700: #b91c1c;
  --osekoo-white: #ffffff;
  --osekoo-black: #000000;

  /* Primitive spacing, type, shape, elevation, motion and layering. */
  --osekoo-space-0: 0;
  --osekoo-space-1: .25rem;
  --osekoo-space-2: .5rem;
  --osekoo-space-3: .75rem;
  --osekoo-space-4: 1rem;
  --osekoo-space-5: 1.25rem;
  --osekoo-space-6: 1.5rem;
  --osekoo-space-8: 2rem;
  --osekoo-space-10: 2.5rem;
  --osekoo-space-12: 3rem;
  --osekoo-space-16: 4rem;
  --osekoo-space-20: 5rem;
  --osekoo-space-24: 6rem;
  --osekoo-font-sans: "Source Sans 3", system-ui, sans-serif;
  --osekoo-font-heading: Lexend, system-ui, sans-serif;
  --osekoo-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --osekoo-text-xs: .75rem;
  --osekoo-text-sm: .875rem;
  --osekoo-text-base: 1rem;
  --osekoo-text-lg: 1.125rem;
  --osekoo-text-xl: 1.25rem;
  --osekoo-text-2xl: 1.5rem;
  --osekoo-text-3xl: 1.875rem;
  --osekoo-text-4xl: 2.25rem;
  --osekoo-leading-tight: 1.2;
  --osekoo-leading-body: 1.6;
  --osekoo-leading-reading: 1.75;
  --osekoo-weight-regular: 400;
  --osekoo-weight-medium: 500;
  --osekoo-weight-semibold: 600;
  --osekoo-weight-bold: 700;
  --osekoo-radius-sm: .5rem;
  --osekoo-radius-md: .75rem;
  --osekoo-radius-lg: 1rem;
  --osekoo-radius-xl: 1.5rem;
  --osekoo-radius-full: 999px;
  --osekoo-shadow-sm: 0 2px 8px rgb(15 23 42 / .06);
  --osekoo-shadow-md: 0 16px 40px rgb(37 99 235 / .10);
  --osekoo-shadow-lg: 0 28px 70px rgb(15 23 42 / .16);
  --osekoo-duration-fast: 150ms;
  --osekoo-duration-standard: 200ms;
  --osekoo-ease-standard: ease;
  --osekoo-z-base: 0;
  --osekoo-z-header: 20;
  --osekoo-z-overlay: 40;
  --osekoo-z-dialog: 50;
  --osekoo-z-toast: 60;

  /* Semantic roles. */
  --color-canvas: var(--osekoo-slate-50);
  --color-surface: var(--osekoo-white);
  --color-surface-subtle: var(--osekoo-blue-50);
  --color-surface-inverse: var(--osekoo-navy-900);
  --color-surface-inverse-raised: var(--osekoo-navy-800);
  --color-surface-translucent: rgb(255 255 255 / .92);
  --color-header-translucent: rgb(255 255 255 / .94);
  --color-text: var(--osekoo-slate-900);
  --color-text-muted: var(--osekoo-slate-600);
  --color-text-inverse: var(--osekoo-white);
  --color-text-inverse-muted: var(--osekoo-slate-300);
  --color-text-inverse-soft: var(--osekoo-blue-100);
  --color-border: var(--osekoo-blue-100);
  --color-border-strong: var(--osekoo-slate-300);
  --color-border-hover: var(--osekoo-blue-200);
  --color-border-control-hover: var(--osekoo-slate-400);
  --color-border-empty: var(--osekoo-slate-400);
  --color-border-inverse: rgb(255 255 255 / .14);
  --color-border-inverse-strong: rgb(147 197 253 / .4);
  --color-action: var(--osekoo-blue-600);
  --color-action-hover: var(--osekoo-blue-700);
  --color-action-active: var(--osekoo-blue-800);
  --color-action-subtle: var(--osekoo-blue-100);
  --color-focus: var(--osekoo-blue-600);
  --color-success: var(--osekoo-green-700);
  --color-success-subtle: var(--osekoo-green-50);
  --color-warning: var(--osekoo-amber-600);
  --color-warning-subtle: var(--osekoo-amber-50);
  --color-danger: var(--osekoo-red-700);
  --color-danger-subtle: var(--osekoo-red-50);
  --color-scrim: rgb(15 23 42 / .58);
  --space-page-gutter: clamp(var(--osekoo-space-4), 4vw, var(--osekoo-space-8));
  --space-section: clamp(var(--osekoo-space-16), 8vw, 6.5rem);
  --content-max: 73.75rem;
  --content-reading: 74ch;
  --focus-width: 3px;
  --focus-offset: 3px;
  --border-width: 1px;
  --control-target-min: 2.75rem;
  --tracking-label: .12em;
  --motion-interactive: var(--osekoo-duration-fast) var(--osekoo-ease-standard);
  --gradient-page: linear-gradient(145deg, var(--osekoo-blue-50) 0%, var(--osekoo-slate-50) 56%, var(--osekoo-amber-50) 140%);
  --gradient-hero: linear-gradient(135deg, var(--osekoo-blue-50) 0%, var(--osekoo-slate-50) 52%, var(--osekoo-amber-50) 100%);
  --gradient-inverse: linear-gradient(150deg, var(--osekoo-navy-900), var(--osekoo-navy-800));
  --gradient-inverse-wide: linear-gradient(145deg, var(--osekoo-navy-900), var(--osekoo-blue-800));
  --gradient-accent-line: linear-gradient(90deg, var(--color-action), var(--osekoo-blue-400), var(--color-warning));
  --shadow-action-sm: 0 8px 20px rgb(37 99 235 / .18);
  --shadow-action-md: 0 12px 28px rgb(37 99 235 / .24);

  /* Component roles. */
  --button-height: 2.875rem;
  --button-padding-inline: var(--osekoo-space-5);
  --button-radius: var(--osekoo-radius-md);
  --button-bg: var(--color-action);
  --button-bg-hover: var(--color-action-hover);
  --button-bg-active: var(--color-action-active);
  --button-fg: var(--color-text-inverse);
  --button-disabled-bg: var(--osekoo-slate-200);
  --button-disabled-fg: var(--osekoo-slate-600);
  --button-danger-bg: var(--color-danger);
  --button-danger-bg-hover: var(--osekoo-red-700);
  --input-height: 2.875rem;
  --input-padding-inline: var(--osekoo-space-3);
  --input-radius: var(--osekoo-radius-sm);
  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-focus);
  --input-border-error: var(--color-danger);
  --input-disabled-bg: var(--osekoo-slate-100);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--osekoo-radius-lg);
  --card-padding: var(--osekoo-space-6);
  --card-shadow: var(--osekoo-shadow-sm);
  --card-shadow-hover: var(--osekoo-shadow-md);
  --alert-radius: var(--osekoo-radius-md);
  --alert-padding: var(--osekoo-space-4);
  --table-cell-padding-block: var(--osekoo-space-3);
  --table-cell-padding-inline: var(--osekoo-space-4);
  --dialog-width: 32rem;
  --dialog-radius: var(--osekoo-radius-lg);
  --dialog-shadow: var(--osekoo-shadow-lg);
  --dialog-scrim: var(--color-scrim);
  --icon-size-sm: var(--osekoo-space-4);
  --icon-size-md: var(--osekoo-space-5);
  --icon-stroke-width: 1.8;
  --toast-width: 24rem;
  --toast-padding: var(--osekoo-space-4);
  --toast-radius: var(--osekoo-radius-lg);
  --toast-shadow: var(--osekoo-shadow-lg);
  --chart-line: var(--color-action);
  --chart-grid: var(--color-border);
  --chart-point-fill: var(--color-surface);
  --hero-orbit-border: rgb(37 99 235 / .12);
  --hero-orbit-shadow: 0 0 0 80px rgb(37 99 235 / .035), 0 0 0 160px rgb(217 119 6 / .025);
  --path-step-bg: rgb(37 99 235 / .22);
  --path-connector: rgb(147 197 253 / .28);
  --progress-inverse-track: rgb(255 255 255 / .2);
}