/* Design Tokens */
:root {
    /* Primary blue scale */
    --blue-50: #f4f8ff;
    --blue-100: #e8f0ff;
    --blue-200: #cfdfff;
    --blue-300: #abc8ff;
    --blue-400: #79aafc;
    --blue-500: #4f86f7;
    --blue-600: #356be7;
    --blue-700: #2955c6;
    --blue-800: #25479e;
    --blue-900: #213e7f;

    /* Cyan support */
    --cyan-200: #cceffd;
    --cyan-400: #61c6f4;
    --cyan-500: #29addf;
    --cyan-600: #168cb8;

    /* Pink-violet AI accent */
    --violet-50: #fbf7ff;
    --violet-100: #f4ebff;
    --violet-200: #ead8ff;
    --violet-300: #d9bcff;
    --violet-400: #bf92ff;
    --violet-500: #a66df4;
    --violet-600: #8a4ee2;

    /* Teal remains available for student support states */
    --teal-400: #37c7b7;
    --teal-500: #19af9f;
    --teal-600: #0f8f84;

    /* Surface system */
    --surface: #edf4ff;
    --surface-soft: #f7fbff;
    --surface-panel: rgba(255, 255, 255, .62);
    --surface-panel-strong: rgba(255, 255, 255, .78);
    --surface-card: rgba(255, 255, 255, .72);
    --surface-card-solid: #ffffff;
    --surface-raised: rgba(247, 251, 255, .84);
    --surface-muted: rgba(241, 247, 255, .92);
    --surface-tint: rgba(222, 235, 255, .48);
    --border: rgba(143, 179, 232, .28);
    --border-strong: rgba(114, 147, 197, .36);
    --border-focus: var(--blue-500);
    --glass-highlight: rgba(255, 255, 255, .72);

    /* Background glows */
    --bg-glow-blue: rgba(68, 129, 245, .24);
    --bg-glow-cyan: rgba(73, 189, 236, .16);
    --bg-glow-violet: rgba(187, 130, 246, .18);

    /* Text */
    --text-1: #13233f;
    --text-2: #4b617f;
    --text-3: #8798b3;
    --text-inv: #ffffff;

    /* Semantic */
    --green-fg: #17624f;
    --green-bg: rgba(203, 248, 231, .88);
    --amber-fg: #8b5c12;
    --amber-bg: rgba(255, 241, 201, .92);
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;

    /* Radii */
    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 22px;
    --radius-xl: 30px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(17, 37, 71, .05);
    --shadow-card:
        0 10px 30px rgba(37, 82, 157, .08),
        0 2px 10px rgba(37, 82, 157, .04),
        0 0 0 1px rgba(255, 255, 255, .42) inset;
    --shadow-hover:
        0 18px 40px rgba(37, 82, 157, .12),
        0 8px 18px rgba(37, 82, 157, .06),
        0 0 0 1px rgba(255, 255, 255, .58) inset;
    --shadow-float:
        0 24px 50px rgba(27, 61, 122, .16),
        0 10px 20px rgba(27, 61, 122, .08);

    /* Transitions */
    --ease: 220ms ease;
    --ease-spring: 320ms cubic-bezier(.22, 1, .36, 1);
}