/*
 * FANOOS web design tokens.
 *
 * Every colour, radius and shadow used anywhere on the site is defined here
 * once, in both themes. A page stylesheet that hard-codes a colour is a bug:
 * it will be wrong in the other theme, and nothing will catch it.
 *
 * The palette (owner's decision, 2026-10-07: "like MedoFast"): MedoFast's
 * own three voices on a white ground. Raspberry red (#EF4056) carries the
 * brand and every primary action; blue (#307FE2) is the second voice, for
 * information and the option a student chose, so a choice is never confused
 * with red for a wrong answer; orange (#FF9000) is for what a student earns
 * (points, coins). Navy-black text (#101A29), white cards lifted by soft
 * grey shadows, and a faint brickwork on the ground.
 * Nothing here names a university, a cohort or a subject.
 */

:root {
    color-scheme: light;

    --bg-body: #f7f7f9;
    --bg-aura-start: #ffffff;
    --bg-aura-end: #fbfbfc;

    --surface: #ffffff;
    --surface-muted: #f4f5f7;
    --surface-strong: #e7e9ee;
    --surface-inset: #f1f2f5;

    --text-primary: #101a29;
    --text-secondary: #4b5466;
    --text-tertiary: #8a91a0;
    --text-on-accent: #ffffff;

    --accent: #ef4056;
    --accent-strong: #d42f45;
    --accent-soft: rgba(239, 64, 86, 0.10);

    --success: #12a150;
    --success-soft: rgba(18, 161, 80, 0.11);
    --warning: #ff9000;
    --warning-soft: rgba(255, 144, 0, 0.14);
    --danger: #dc3545;
    --danger-soft: rgba(220, 53, 69, 0.09);

    --border: rgba(16, 26, 41, 0.07);
    --border-strong: rgba(16, 26, 41, 0.16);

    --focus-ring: rgba(239, 64, 86, 0.32);

    /*
     * Shadows are soft and grey: a white card lifts off a white ground by
     * its shadow alone, the way MedoFast's tiles do. Only a surface that is
     * itself accent-coloured casts a coloured shadow.
     */
    --shadow-soft: 0 1px 2px rgba(16, 26, 41, 0.04), 0 6px 18px -8px rgba(16, 26, 41, 0.12);
    --shadow-strong: 0 18px 40px -18px rgba(16, 26, 41, 0.22);
    /* For a surface that has lifted under the pointer. */
    --shadow-lift: 0 14px 30px -14px rgba(16, 26, 41, 0.22);
    /* For a surface that is itself accent-coloured, so the shadow it casts is its own colour. */
    --shadow-accent: 0 10px 22px -10px rgba(239, 64, 86, 0.55);

    /* Primary surfaces: the brand red, lit faintly from one corner. */
    --accent-gradient: linear-gradient(135deg, #ff5a6c 0%, #ef4056 55%, #e0344b 100%);
    /* The second voice: blue, for what is informational or chosen. */
    --info-gradient: linear-gradient(45deg, #307fe2, #5ca4ff);
    /* The third: orange, for what a student earns. */
    --reward-gradient: linear-gradient(45deg, #ff9700, #ff7a00);

    /* The ground stays white; these pools are barely there. */
    --aura-1: rgba(239, 64, 86, 0.04);
    --aura-2: rgba(48, 127, 226, 0.035);
    --aura-3: rgba(255, 144, 0, 0.03);

    /* The hairline brickwork of the ground (foundation/base.css). */
    --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48'%3E%3Cg fill='none' stroke='rgba(16,26,41,0.055)' stroke-width='1'%3E%3Cpath d='M0 .5H72M0 24.5H72M.5 0V24M36.5 24V48'/%3E%3C/g%3E%3C/svg%3E");

    /*
     * Information hues: each *kind* of fact has its own colour (a subject,
     * a difficulty, a tag, a source), so they are told apart at a glance.
     * A hue names a kind of information, never a mood.
     */
    --info: #307fe2;
    --info-soft: rgba(48, 127, 226, 0.10);
    --hue-subject: #0f9488;
    --hue-subject-soft: rgba(15, 148, 136, 0.11);
    --hue-difficulty: #ff7a00;
    --hue-difficulty-soft: rgba(255, 122, 0, 0.12);
    --hue-tag: #6f42c1;
    --hue-tag-soft: rgba(111, 66, 193, 0.10);
    --hue-source: #d63384;
    --hue-source-soft: rgba(214, 51, 132, 0.10);

    /* Motion: short, feedback not decoration; base.css collapses it under prefers-reduced-motion. */
    --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
    --motion-fast: 120ms;
    --motion-base: 200ms;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --content-width: 1080px;
    --header-height: 64px;
}

/*
 * Dark theme: deep blue-black, the same three voices lifted for a dark
 * ground. The viewer's own setting wins over the system preference, so both
 * a media query and an explicit attribute are defined -- and the media query
 * is guarded so an explicit "light" choice is never overridden. The two
 * blocks are kept identical (tests/web/design_tokens_test.mjs).
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg-body: #0f141d;
        --bg-aura-start: #121824;
        --bg-aura-end: #10151e;

        --surface: #18202c;
        --surface-muted: #1e2734;
        --surface-strong: #2a3443;
        --surface-inset: #141b26;

        --text-primary: #eef1f6;
        --text-secondary: #a9b2c3;
        --text-tertiary: #737d90;
        --text-on-accent: #ffffff;

        --accent: #ff5a6e;
        --accent-strong: #ff7a8a;
        --accent-soft: rgba(255, 90, 110, 0.15);

        --success: #4ade80;
        --success-soft: rgba(74, 222, 128, 0.13);
        --warning: #ffa733;
        --warning-soft: rgba(255, 167, 51, 0.15);
        --danger: #f87171;
        --danger-soft: rgba(248, 113, 113, 0.14);

        --border: rgba(238, 241, 246, 0.08);
        --border-strong: rgba(238, 241, 246, 0.17);

        --focus-ring: rgba(255, 90, 110, 0.45);

        --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
        --shadow-strong: 0 18px 44px -14px rgba(0, 0, 0, 0.7);
        --shadow-lift: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
        --shadow-accent: 0 10px 26px -10px rgba(255, 90, 110, 0.5);

        --accent-gradient: linear-gradient(135deg, #ff6f80 0%, #ff5a6e 55%, #ef4056 100%);
        --info-gradient: linear-gradient(45deg, #3b8af0, #6aafff);
        --reward-gradient: linear-gradient(45deg, #ffa31a, #ff8a1a);

        --aura-1: rgba(255, 90, 110, 0.05);
        --aura-2: rgba(96, 165, 250, 0.04);
        --aura-3: rgba(255, 167, 51, 0.03);

            --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48'%3E%3Cg fill='none' stroke='rgba(238,241,246,0.035)' stroke-width='1'%3E%3Cpath d='M0 .5H72M0 24.5H72M.5 0V24M36.5 24V48'/%3E%3C/g%3E%3C/svg%3E");

        --info: #60a5fa;
        --info-soft: rgba(96, 165, 250, 0.16);
        --hue-subject: #2dd4bf;
        --hue-subject-soft: rgba(45, 212, 191, 0.15);
        --hue-difficulty: #ffa733;
        --hue-difficulty-soft: rgba(255, 167, 51, 0.15);
        --hue-tag: #a78bfa;
        --hue-tag-soft: rgba(167, 139, 250, 0.16);
        --hue-source: #f472b6;
        --hue-source-soft: rgba(244, 114, 182, 0.15);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-body: #0f141d;
    --bg-aura-start: #121824;
    --bg-aura-end: #10151e;

    --surface: #18202c;
    --surface-muted: #1e2734;
    --surface-strong: #2a3443;
    --surface-inset: #141b26;

    --text-primary: #eef1f6;
    --text-secondary: #a9b2c3;
    --text-tertiary: #737d90;
    --text-on-accent: #ffffff;

    --accent: #ff5a6e;
    --accent-strong: #ff7a8a;
    --accent-soft: rgba(255, 90, 110, 0.15);

    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.13);
    --warning: #ffa733;
    --warning-soft: rgba(255, 167, 51, 0.15);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);

    --border: rgba(238, 241, 246, 0.08);
    --border-strong: rgba(238, 241, 246, 0.17);

    --focus-ring: rgba(255, 90, 110, 0.45);

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
    --shadow-strong: 0 18px 44px -14px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
    --shadow-accent: 0 10px 26px -10px rgba(255, 90, 110, 0.5);

    --accent-gradient: linear-gradient(135deg, #ff6f80 0%, #ff5a6e 55%, #ef4056 100%);
    --info-gradient: linear-gradient(45deg, #3b8af0, #6aafff);
    --reward-gradient: linear-gradient(45deg, #ffa31a, #ff8a1a);

    --aura-1: rgba(255, 90, 110, 0.05);
    --aura-2: rgba(96, 165, 250, 0.04);
    --aura-3: rgba(255, 167, 51, 0.03);

    --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48'%3E%3Cg fill='none' stroke='rgba(238,241,246,0.035)' stroke-width='1'%3E%3Cpath d='M0 .5H72M0 24.5H72M.5 0V24M36.5 24V48'/%3E%3C/g%3E%3C/svg%3E");

    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.16);
    --hue-subject: #2dd4bf;
    --hue-subject-soft: rgba(45, 212, 191, 0.15);
    --hue-difficulty: #ffa733;
    --hue-difficulty-soft: rgba(255, 167, 51, 0.15);
    --hue-tag: #a78bfa;
    --hue-tag-soft: rgba(167, 139, 250, 0.16);
    --hue-source: #f472b6;
    --hue-source-soft: rgba(244, 114, 182, 0.15);
}