/* =============================================================================
   Landing tokens — restrained sapphire-on-off-white palette.
   Subset of /src/LearnWordsAI.SharedUI/wwwroot/css/tokens.css ("cool" theme),
   trimmed to what the marketing page actually needs.

   Designer pass (2026-06): expanded with --shadow-render, word-state vars
   (--word-new-*, --word-learning-line, --word-familiar-line), --grammar*,
   and the display/h2/h3/body/caption type scale used by site.css renders.
   ============================================================================= */

/* Self-hosted Inter (rsms.me/inter, OFL 1.1). Four weights cover everything
   the landing uses: body (400), kicker (500), heading (600), wordmark (700).
   font-display:swap so text shows in fallback before web font loads. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/Inter-Bold.woff2') format('woff2');
}

:root {
    /* ---- Geometry / motion / type stacks (theme-independent) ---- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    /* Spacing scale (4px base). */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Type scale. */
    --type-display-size: clamp(40px, 5.6vw, 64px);
    --type-display-line: 1.06;
    --type-display-weight: 700;
    --type-display-track: -0.025em;

    --type-h2-size: clamp(28px, 3.6vw, 40px);
    --type-h2-line: 1.14;
    --type-h2-weight: 650;
    --type-h2-track: -0.02em;

    --type-h3-size: 20px;
    --type-h3-line: 28px;
    --type-h3-weight: 600;

    --type-body-l-size: 18px;
    --type-body-l-line: 29px;

    --type-body-size: 16px;
    --type-body-line: 26px;

    --type-caption-size: 13px;
    --type-caption-line: 18px;

    --container-max: 1140px;
    --container-narrow: 720px;

    /* Reading-surface type — matches the app's Reader. Used inside the
       product renders so the parallel-text mockup feels like the real thing. */
    --reading-size: 19px;
    --reading-line: 32px;
}

/* ---- COOL theme (light, sapphire) — applied via data-theme="cool" ---- */
:root[data-theme="cool"] {
    --bg:           #f6f8fc;
    --bg-secondary: #eaeff7;
    --bg-elevated:  #ffffff;
    --card-bg:      #ffffff;
    --card-border:  rgba(19, 27, 41, 0.10);
    --card-hover:   #f1f4fa;

    --text:           #131b29;
    --text-secondary: #4a586b;
    --hint:           #8694a8;
    --on-surface-rgb: 19, 27, 41;

    --accent:        #2563d9;
    --accent-rgb:    37, 99, 217;
    --accent-strong: #1a4ab0;
    --accent-soft:   rgba(37, 99, 217, 0.10);

    --warning:     #c47715;
    --warning-rgb: 196, 119, 21;
    --success:     #16956a;
    --grammar:     #7c3aed;
    --grammar-rgb: 124, 58, 237;

    /* Word-state highlighting inside the product renders (the Reader's
       signature). Mirrors WordStateColors in SharedUI.Reading. */
    --word-new-bg:        rgba(37, 99, 217, 0.12);
    --word-new-line:      var(--accent);
    --word-seen-bg:       rgba(37, 99, 217, 0.06);
    --word-learning-line: var(--warning);
    --word-familiar-line: rgba(22, 149, 106, 0.55);

    --button-bg:   var(--accent);
    --button-text: #ffffff;

    --shadow-1: 0 1px 2px rgba(21, 40, 70, 0.06);
    --shadow-2: 0 6px 24px rgba(21, 40, 70, 0.10);
    --shadow-3: 0 18px 50px rgba(21, 40, 70, 0.16);
    --shadow-render: 0 30px 70px -28px rgba(21, 40, 70, 0.42), 0 4px 14px rgba(21, 40, 70, 0.08);
}

/* Honour OS dark preference even though landing is cool-by-default —
   only inverts the surface so the body is readable for users with strong
   dark-mode habits. The accent stays sapphire (brand colour). */
@media (prefers-color-scheme: dark) {
    :root[data-theme="cool"] {
        --bg:           #0d1018;
        --bg-secondary: #131826;
        --bg-elevated:  #181f2e;
        --card-bg:      #161c2a;
        --card-border:  rgba(244, 246, 252, 0.10);
        --card-hover:   #1c2334;

        --text:           #f4f6fc;
        --text-secondary: #b8c1d2;
        --hint:           #828ca0;
        --on-surface-rgb: 244, 246, 252;

        --accent:        #6aa7ff;
        --accent-rgb:    106, 167, 255;
        --accent-strong: #91bdff;
        --accent-soft:   rgba(106, 167, 255, 0.14);

        --warning:     #d89a4a;
        --warning-rgb: 216, 154, 74;
        --success:     #4cc08a;
        --grammar:     #b39bff;
        --grammar-rgb: 179, 155, 255;

        --word-new-bg:        rgba(106, 167, 255, 0.18);
        --word-seen-bg:       rgba(106, 167, 255, 0.09);
        --word-familiar-line: rgba(92, 197, 135, 0.55);

        --button-bg:   var(--accent);
        --button-text: #06121f;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
        --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.60);
        --shadow-render: 0 30px 70px -28px rgba(0, 0, 0, 0.70), 0 4px 14px rgba(0, 0, 0, 0.40);
    }
}