/* theme.landing.tokens.css — Landing-page-only derived tokens.
   Loaded AFTER theme.tokens.css in static HTML pages (index.html, en/, ur/).
   NOT loaded in Blazor (App.razor) — platform pages do not use these tokens. */

:root {
    /* ── Landing visual theme ── */
    --landing-theme-base: var(--brand-blue);
    --landing-svg-filter: none;
    /* To switch to green: --landing-theme-base: var(--brand-green);
       --landing-svg-filter: hue-rotate(-61deg) saturate(1.2); */

    /* Hardcoded fallbacks (blue base #2863E4) for browsers without color-mix() */
    --landing-900: #0E2350;
    --landing-800: #143272;
    --landing-600: #1E4AAB;
    --landing-400: #5382E9;
    --landing-300: #739AED;
    --landing-200: #94B1F2;
    --landing-glow: #2863E4;
    --landing-link-hover: #487AE8;
    --landing-text-dark: #182F60;
    --landing-text-mid: #425983;

    /* color-mix() versions (override fallbacks in modern browsers) */
    --landing-900: color-mix(in srgb, var(--landing-theme-base) 35%, black);
    --landing-800: color-mix(in srgb, var(--landing-theme-base) 50%, black);
    --landing-600: color-mix(in srgb, var(--landing-theme-base) 75%, black);
    --landing-400: color-mix(in srgb, var(--landing-theme-base), white 20%);
    --landing-300: color-mix(in srgb, var(--landing-theme-base), white 35%);
    --landing-200: color-mix(in srgb, var(--landing-theme-base), white 50%);
    --landing-glow: var(--landing-theme-base);
    --landing-link-hover: color-mix(in srgb, var(--landing-theme-base), white 15%);
    --landing-text-dark: color-mix(in srgb, var(--landing-theme-base) 30%, #111827);
    --landing-text-mid: color-mix(in srgb, var(--landing-theme-base) 25%, #4b5563);
}

/* ── Dark mode overrides ── */
[data-theme="dark"] {
    /* Hardcoded fallbacks */
    --landing-text-dark: #C2CFEE;
    --landing-text-mid: #8B99B7;

    /* color-mix() versions */
    --landing-text-dark: color-mix(in srgb, var(--landing-theme-base) 20%, #e8eaf0);
    --landing-text-mid: color-mix(in srgb, var(--landing-theme-base) 15%, #9ca3af);
}