/* ==========================================================================
   Design tokens (tasks/UiRedesign.md, values from the mockups)

   Light is the default on :root, dark redefines the same names under
   :root[data-theme="dark"]. App.razor sets data-theme from the isDarkMode cookie.
   Components only read these variables, never fixed colours.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Typography */
    --en-font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    --en-font-body: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
    --en-font-ipa: 'Gentium Book Plus', 'Charis SIL', 'Doulos SIL', serif;

    /* Surfaces */
    --en-bg: #F4F5FA;
    --en-bg-glow: none;
    --en-surface: #FFFFFF;
    --en-surface-2: #EDEFF6;
    --en-surface-3: #E2E5F0;
    --en-line: #DCDFEA;
    --en-line-strong: #C3C7D8;
    --en-track: #C9CEDF;          /* empty part of progress bars, visible on surface and on the highlighted row */

    /* Text */
    --en-ink: #171A33;
    --en-ink-soft: #464B68;
    --en-ink-muted: #6C7190;
    --en-on-accent: #FFFFFF;

    /* Mouth Styles (brand colour) and Tongue Styles */
    --en-mouth: #5240D8;
    --en-mouth-soft: #E9E6FD;
    --en-mouth-ink: #3A2BB0;
    --en-tongue: #C42F63;
    --en-tongue-soft: #FCE6EE;
    --en-tongue-ink: #9E1F4C;

    /* States and tiers */
    --en-done: #13895F;
    --en-done-soft: #DDF3EA;
    --en-pro: #9A6510;
    --en-pro-soft: #FBEFD6;
    --en-info: #2563C9;
    --en-info-soft: #E2ECFB;
    --en-danger: #C42F3D;
    --en-danger-soft: #FCE4E6;

    /* Header rows of lesson, glossary and IPA tables: change the look of all table heads here.
       Derived from the brand colour, so it follows light and dark automatically. */
    --en-table-head-bg: color-mix(in srgb, var(--en-mouth) 10%, var(--en-surface));
    --en-table-head-border: color-mix(in srgb, var(--en-mouth) 35%, transparent);

    /* Accent surface (continue card, CTA band) */
    --en-hero-bg: linear-gradient(135deg, #5240D8 0%, #7B3FD1 100%);
    --en-hero-ink: #FFFFFF;
    --en-hero-action-bg: #FFFFFF;
    --en-hero-action-ink: #2A1E8C;

    /* Drawn mouth on the landing page (MouthGlyph) */
    --en-glyph-lip: #E07A93;
    --en-glyph-lip-edge: #B24A66;
    --en-glyph-cavity: #3B1F3A;
    --en-glyph-teeth: #FFFFFF;

    /* Shape */
    --en-radius-sm: 6px;
    --en-radius-md: 10px;
    --en-radius-lg: 16px;
    --en-radius-xl: 24px;
    --en-shadow-1: 0 1px 2px rgba(23, 26, 51, .06), 0 1px 1px rgba(23, 26, 51, .04);
    --en-shadow-2: 0 10px 30px -12px rgba(40, 32, 120, .25);
}

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

    --en-bg: #0F1029;
    --en-bg-glow: radial-gradient(1100px 620px at 8% -8%, rgba(120, 96, 255, .22), transparent 60%),
                  radial-gradient(900px 600px at 100% 110%, rgba(40, 110, 220, .16), transparent 60%);
    --en-surface: #171936;
    --en-surface-2: #1F2246;
    --en-surface-3: #292C58;
    --en-line: #2A2D57;
    --en-line-strong: #3B3F75;
    --en-track: #474B86;

    --en-ink: #ECEDFB;
    --en-ink-soft: #B9BCDD;
    --en-ink-muted: #8A8EB4;
    --en-on-accent: #120F2E;

    --en-mouth: #9C90FF;
    --en-mouth-soft: rgba(156, 144, 255, .16);
    --en-mouth-ink: #C2BAFF;
    --en-tongue: #FF7FA7;
    --en-tongue-soft: rgba(255, 127, 167, .15);
    --en-tongue-ink: #FFAAC4;

    --en-done: #3FD3A0;
    --en-done-soft: rgba(63, 211, 160, .14);
    --en-pro: #F3BA4E;
    --en-pro-soft: rgba(243, 186, 78, .14);
    --en-info: #6FA6FF;
    --en-info-soft: rgba(111, 166, 255, .14);
    --en-danger: #FF7A85;
    --en-danger-soft: rgba(255, 122, 133, .14);

    --en-hero-bg: linear-gradient(135deg, #5B46F0 0%, #8E3BE0 55%, #B03BBF 100%);

    --en-glyph-lip: #E58AA2;
    --en-glyph-lip-edge: #F2AFC0;
    --en-glyph-cavity: #1A0C1E;
    --en-glyph-teeth: #F3F1FF;

    --en-shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset;
    --en-shadow-2: 0 18px 40px -18px rgba(0, 0, 0, .7);
}