:root {
    --background: #ffffff;
    --foreground: #09090b;

    --canvas: #f6f7f2;

    --card: #ffffff;
    --card-foreground: #09090b;

    --popover: #ffffff;
    --popover-foreground: #09090b;

    --primary-foreground: var(--primary-on, #ffffff);
    --primary-fg: var(--primary-on, #ffffff);
    --primary-hover: var(--primary-800, #4f5a45);

    --sh-secondary: #f4f4f5;
    --sh-secondary-foreground: #18181b;

    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --muted-fg: #71717a;

    --accent: #f4f4f5;
    --accent-foreground: #18181b;

    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --destructive-muted: #fef2f2;
    --destructive-border: #fecaca;

    --success: #16a34a;
    --success-foreground: #ffffff;
    --success-muted: #f0fdf4;
    --success-border: #bbf7d0;

    --warning: #d97706;
    --warning-foreground: #ffffff;
    --warning-muted: #fffbeb;
    --warning-border: #fde68a;

    --info: #0284c7;
    --info-foreground: #ffffff;
    --info-muted: #f0f9ff;
    --info-border: #bae6fd;

    --border: #e4e4e7;
    --border-strong: #d4d4d8;
    --input: #e4e4e7;
    --ring: rgba(var(--primary-rgb, 120, 135, 104), .35);

    --radius: 0.75rem;
    --sh-radius-xs: calc(var(--radius) - 6px);
    --sh-radius-sm: calc(var(--radius) - 4px);
    --sh-radius-md: calc(var(--radius) - 2px);
    --sh-radius-lg: var(--radius);
    --sh-radius-xl: calc(var(--radius) + 4px);

    --sh-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
    --sh-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .07), 0 1px 2px -1px rgb(0 0 0 / .07);
    --sh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);
    --sh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .06);
    --sh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .10), 0 8px 10px -6px rgb(0 0 0 / .07);

    --chart-1: var(--primary-500, #8f9d83);
    --chart-2: #0ea5e9;
    --chart-3: #f59e0b;
    --chart-4: #a855f7;
    --chart-5: #ec4899;
    --chart-6: #14b8a6;

    --sidebar: #ffffff;
    --sidebar-foreground: #09090b;
    --sidebar-primary: var(--primary, #788768);
    --sidebar-primary-foreground: var(--primary-on, #ffffff);
    --sidebar-accent: var(--primary-50, #f1f4ec);
    --sidebar-accent-foreground: var(--primary-800, #4f5a45);
    --sidebar-border: #e4e4e7;
    --sidebar-ring: var(--ring);

    --accent-purple: #7c3aed;
    --accent-purple-muted: #faf5ff;
    --accent-purple-border: #e9d5ff;
    --accent-indigo: #4338ca;
    --accent-indigo-muted: #eef2ff;
    --accent-indigo-border: #c7d2fe;
    --accent-blue: #2563eb;
    --accent-blue-muted: #eff6ff;
    --accent-blue-border: #bfdbfe;
    --accent-orange: #c2410c;
    --accent-orange-muted: #fff7ed;
    --accent-orange-border: #fed7aa;
    --accent-pink: #be185d;
    --accent-pink-muted: #fdf2f8;
    --accent-pink-border: #fbcfe8;
    --accent-teal: #0f766e;
    --accent-teal-muted: #f0fdfa;
    --accent-teal-border: #99f6e4;

    --ink-white: #ffffff;
    --ink-50: #f9fafb;
    --ink-100: #f3f4f6;
    --ink-200: #e5e7eb;
    --ink-300: #d1d5db;
    --ink-400: #9ca3af;
    --ink-500: #6b7280;
    --ink-600: #4b5563;
    --ink-700: #374151;
    --ink-800: #1f2937;
    --ink-900: #111827;

    --sh-ease: cubic-bezier(.4, 0, .2, 1);
    --sh-duration: 160ms;
}

.dark,
:root[data-theme="dark"] {
    --background: #16161a;
    --foreground: #dcdce2;

    --canvas: #101014;

    --card: #1c1c21;
    --card-foreground: #dcdce2;

    --popover: #212127;
    --popover-foreground: #dcdce2;

    --primary-foreground: var(--primary-on, #ffffff);
    --primary-fg: var(--primary-on, #ffffff);
    --primary-hover: var(--primary-400, #a4b199);

    --sh-secondary: #26262c;
    --sh-secondary-foreground: #dcdce2;

    --muted: #26262c;
    --muted-foreground: #9a9aa5;
    --muted-fg: #9a9aa5;

    --accent: #26262c;
    --accent-foreground: #dcdce2;

    --destructive: #e58585;
    --destructive-foreground: #ffffff;
    --destructive-muted: rgb(229 133 133 / .13);
    --destructive-border: rgb(229 133 133 / .26);

    --success: #7fcd9b;
    --success-foreground: #ffffff;
    --success-muted: rgb(127 205 155 / .13);
    --success-border: rgb(127 205 155 / .26);

    --warning: #e3b45f;
    --warning-foreground: #ffffff;
    --warning-muted: rgb(227 180 95 / .13);
    --warning-border: rgb(227 180 95 / .26);

    --info: #86bde6;
    --info-foreground: #ffffff;
    --info-muted: rgb(134 189 230 / .13);
    --info-border: rgb(134 189 230 / .26);

    --border: rgb(255 255 255 / .10);
    --border-strong: rgb(255 255 255 / .17);
    --input: rgb(255 255 255 / .14);
    --ring: rgba(var(--primary-rgb, 120, 135, 104), .55);

    --sh-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .40);
    --sh-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45);
    --sh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .45);
    --sh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .45);
    --sh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .50);

    --sidebar: #1c1c21;
    --sidebar-foreground: #dcdce2;
    --sidebar-accent: #26262c;
    --sidebar-accent-foreground: #dcdce2;
    --sidebar-border: rgb(255 255 255 / .10);

    --accent-purple: #b79ceb;
    --accent-purple-muted: rgb(183 156 235 / .13);
    --accent-purple-border: rgb(183 156 235 / .26);
    --accent-indigo: #9aa4e8;
    --accent-indigo-muted: rgb(154 164 232 / .13);
    --accent-indigo-border: rgb(154 164 232 / .26);
    --accent-blue: #7fb0e6;
    --accent-blue-muted: rgb(127 176 230 / .13);
    --accent-blue-border: rgb(127 176 230 / .26);
    --accent-orange: #e0996b;
    --accent-orange-muted: rgb(224 153 107 / .13);
    --accent-orange-border: rgb(224 153 107 / .26);
    --accent-pink: #e08fb4;
    --accent-pink-muted: rgb(224 143 180 / .13);
    --accent-pink-border: rgb(224 143 180 / .26);
    --accent-teal: #6fc2b8;
    --accent-teal-muted: rgb(111 194 184 / .13);
    --accent-teal-border: rgb(111 194 184 / .26);

    --ink-white: #1c1c21;
    --ink-50: #212127;
    --ink-100: #26262c;
    --ink-200: #32323a;
    --ink-300: #42424c;
    --ink-400: #8a8a96;
    --ink-500: #9a9aa5;
    --ink-600: #b6b6c0;
    --ink-700: #c9c9d1;
    --ink-800: #d5d5dc;
    --ink-900: #dcdce2;
}

/* Bridge for design-system.css's own ramp. Light values are identical to what
   that file already declares, so this changes nothing until dark mode is on. */
:root {
    --color-white: var(--ink-white);
    --color-black: var(--ink-900);
    --color-gray-50: var(--ink-50);
    --color-gray-100: var(--ink-100);
    --color-gray-200: var(--ink-200);
    --color-gray-300: var(--ink-300);
    --color-gray-400: var(--ink-400);
    --color-gray-500: var(--ink-500);
    --color-gray-600: var(--ink-600);
    --color-gray-700: var(--ink-700);
    --color-gray-800: var(--ink-800);
    --color-gray-900: var(--ink-900);

    /* design-system.css also owns the form-field palette and the status ramp.
       Light values match its own declarations exactly, so nothing moves until
       dark mode is on — but without this every input stays white. */
    --field-bg: var(--card);
    --field-bg-disabled: var(--muted);
    --field-color: var(--foreground);
    --field-placeholder: var(--muted-foreground);
    --field-border-color: var(--border);
    --field-border-color-hover: var(--border-strong);

    --color-warning: var(--warning);
    --color-warning-light: var(--warning-muted);
    --color-error: var(--destructive);
    --color-error-light: var(--destructive-muted);
    --color-info: var(--info);
    --color-info-light: var(--info-muted);

    /* .bg-secondary is a pale brand chip on 46 pages; it needs a dark twin or it
       stays a glaring block. Light values are design-system.css's own. */
    --color-secondary: #f1f6d5;
    --color-secondary-dark: #e5eac4;
    --color-secondary-light: #f8fae8;

    --primary-deep-800: var(--primary-800, #4f5a45);
    --primary-deep-700: var(--primary-700, #65745a);
    --primary-deep-600: var(--primary-600, #8f9d83);

    --ui-wash-hover: rgba(255, 255, 255, .8);
    --ui-wash-active: rgba(255, 255, 255, .7);
    --ui-scrim-rgb: 255, 255, 255;
}

.dark,
:root[data-theme="dark"] {
    --color-secondary: #34381f;
    --color-secondary-dark: #3e4326;
    --color-secondary-light: #2b2e19;

    --primary-deep-800: var(--primary-100);
    --primary-deep-700: var(--primary-200);
    --primary-deep-600: var(--primary-300);

    --ui-wash-hover: rgba(255, 255, 255, .07);
    --ui-wash-active: rgba(255, 255, 255, .11);
    --ui-scrim-rgb: 28, 28, 33;
}

.sh-scope {
    color: var(--foreground);
}

/* A form control with no authored background falls back to the browser's own
   white, which is a glaring block in dark mode. :where() keeps this at zero
   specificity, so anything the app actually styles still wins. */
:where(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"])) {
    background-color: var(--field-bg);
    color: var(--field-color);
}

/* The student header pulls flowbite.min.css from a CDN; its Preflight forces a
   white fill on form controls and outranks the zero-specificity rule above.
   Restricting this to controls with no class at all reclaims exactly the bare
   ones Flowbite hits, while every styled component keeps its own background. */
:root[data-theme="dark"] :where(select:not([class]), textarea:not([class]), input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"])) {
    background-color: var(--field-bg);
    color: var(--field-color);
}

.theme-ico-dark { display: none; }
:root[data-theme="dark"] .theme-ico-light { display: none; }
:root[data-theme="dark"] .theme-ico-dark { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    :root {
        --sh-duration: 0ms;
    }
}