/* =====================================================================
   OefProef — design tokens
   Location: Portal.Web/wwwroot/css/tokens.css (load before all other CSS)

   Two layers:
   1. PRIMITIVES — raw color ramps. Never use these in components.
   2. SEMANTIC   — meaning-based tokens. Components use ONLY these.
   ===================================================================== */

:root {
    /* -----------------------------------------------------------------
       1. PRIMITIVES
       ----------------------------------------------------------------- */

    --white: #ffffff;
    --black: #000000;
    /* Primary — deep teal */
    --primary-50: #f0fdfa;
    --primary-100: #ccfbf1;
    --primary-200: #99f6e4;
    --primary-300: #5eead4;
    --primary-400: #2dd4bf;
    --primary-500: #0d9488;
    --primary-600: #0f766e;
    --primary-700: #115e59;
    --primary-800: #134e4a;
    --primary-900: #0f3b38;
    --primary-950: #042f2e;
    /* Slate — the only gray (now warm paper tones) */
    --slate-50: #faf8f3;
    --slate-100: #f2efe7;
    --slate-200: #e5e0d5;
    --slate-300: #cfc8ba;
    --slate-400: #a8a092;
    --slate-500: #7d766a;
    --slate-600: #5f594f;
    --slate-700: #48433b;
    --slate-800: #332f2a;
    --slate-900: #24211d;
    --slate-950: #141210;
    /* Red — errors */
    --red-50: #fdf2f2;
    --red-100: #fce3e2;
    --red-200: #facccb;
    --red-300: #f5a8a6;
    --red-400: #ef7774;
    --red-500: #e55049;
    --red-600: #d3372e;
    --red-700: #b12b23;
    --red-800: #922620;
    --red-900: #7a2420;
    --red-950: #420e0c;
    /* Green — correct */
    --green-50: #f1fdf4;
    --green-100: #dffbe7;
    --green-200: #c0f6d1;
    --green-300: #92edad;
    --green-400: #60dc82;
    --green-500: #43c361;
    --green-600: #34a14c;
    --green-700: #2a7e3f;
    --green-800: #236435;
    --green-900: #1e522e;
    --green-950: #0b2d16;
    /* Amber — attention */
    --amber-50: #fefbec;
    --amber-100: #fcf3c9;
    --amber-200: #f9e78e;
    --amber-300: #f7d457;
    --amber-400: #f4c136;
    --amber-500: #eda126;
    --amber-600: #d17b1e;
    --amber-700: #ad5818;
    --amber-800: #8c4417;
    --amber-900: #733815;
    --amber-950: #421c06;
    /* Indigo — secondary accent (use sparingly) */
    --indigo-50: #eff2ff;
    --indigo-100: #e1e7fe;
    --indigo-200: #cad2fd;
    --indigo-300: #a9b4fa;
    --indigo-400: #878cf6;
    --indigo-500: #6b66ee;
    --indigo-600: #5746e2;
    --indigo-700: #4b38c8;
    --indigo-800: #3d30a1;
    --indigo-900: #352e7f;
    --indigo-950: #201b4a;
    /* -----------------------------------------------------------------
       2. SEMANTIC — components use only these
       ----------------------------------------------------------------- */
    /* Surfaces */
    --color-bg: var(--slate-50);
    --color-surface: var(--white);
    --color-surface-muted: var(--slate-100);
    --color-surface-inverse: var(--primary-950);
    --color-overlay: color-mix(in srgb, var(--slate-700) 52%, transparent);
    /* Text */
    --color-text: var(--slate-900);
    --color-text-muted: var(--slate-600);
    --color-text-subtle: var(--slate-400);
    --color-text-inverse: var(--white);
    /* Borders */
    --color-border: var(--slate-200);
    --color-border-strong: var(--slate-300);
    /* Actions */
    --color-action: var(--primary-600);
    --color-action-hover: var(--primary-700);
    --color-action-text: var(--white);
    --color-action-soft: var(--primary-50);
    --color-accent-soft: var(--primary-100);
    --color-accent-strong: var(--primary-800);
    --color-focus: var(--primary-400);
    /* Feedback */
    --color-correct: var(--green-600);
    --color-correct-soft: var(--green-50);
    --color-wrong: var(--red-600);
    --color-wrong-soft: var(--red-50);
    --color-attention: var(--amber-600);
    --color-attention-soft: var(--amber-50);
    /* Dictation: hidden sentence rectangle */
    --color-sentence-hidden: var(--slate-300);
    /* Heatmap — word progress (white → red → orange → yellow → green → dark green) */
    --heat-0: var(--white); /* not started */
    --heat-1: var(--red-400); /* many errors */
    --heat-2: var(--amber-500); /* orange */
    --heat-3: var(--amber-300); /* yellow */
    --heat-4: var(--green-400); /* almost there */
    --heat-5: var(--green-700); /* mastered */
    --heat-border: var(--slate-200);
    /* -----------------------------------------------------------------
       Typography
       ----------------------------------------------------------------- */
    --font-display: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 0.9375rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    /* Dictation text is read by a child — larger than body */
    --text-dictation: 1.375rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 1.8;
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    /* -----------------------------------------------------------------
       Spacing (4px scale)
       ----------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-hairline: 0.125rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    /* -----------------------------------------------------------------
       Shape & depth — square, like the Astro site
       ----------------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-panel: 0.3125rem;
    --radius-card: 0.75rem;
    --radius-round: 50%;
    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--slate-950) 8%, transparent);
    --shadow-md: 0 8px 24px color-mix(in srgb, var(--slate-950) 12%, transparent);
    --border-width: 1px;
    --border-accent-width: 0.125rem;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-400) 40%, transparent);
    /* -----------------------------------------------------------------
       Layout & motion
       ----------------------------------------------------------------- */
    --content-width: 60rem;
    --content-width-medium: 40rem;
    --content-width-narrow: 30rem;
    --content-width-label: 12rem;
    --content-width-card: 22.5rem;
    --content-height-card: 13.75rem;
    --tap-target: 2.75rem; /* Mobile: 44px touch target */

    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-shimmer: 8s;
    --duration-preview-short: 2s;
    --duration-preview-medium: 2.5s;
    --duration-preview-long: 3s;
    --duration-overlay-in: 200ms;
    --duration-overlay-out: 300ms;
    --duration-word-flight: 2200ms;
    --duration-field-cycle: 20s;
    --duration-field-step: 1600ms;
    --duration-card-transition: 500ms;
    --duration-accessible-crossfade: 500ms;
    --ease: ease;
}

@media (min-width: 48rem) {
    :root {
        --tap-target: 2.5rem; /* Tablet: 40px */
    }
}

@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
    :root {
        --tap-target: 1.5rem; /* Desktop with mouse: 24px */
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-shimmer: 0ms;
        --duration-preview-short: 0ms;
        --duration-preview-medium: 0ms;
        --duration-preview-long: 0ms;
        --duration-overlay-in: 0ms;
        --duration-overlay-out: 0ms;
        --duration-word-flight: 0ms;
        --duration-field-cycle: 0ms;
        --duration-field-step: 0ms;
        --duration-card-transition: 0ms;
    }
}