/*
 * Tfastunlocker design tokens.
 *
 * Every colour on the site and in the customer dashboard is derived here from
 * three numbers: --base-h, --base-s and --base-l. Those are emitted per request
 * by assets/templates/tfast-basic/css/color.php from the "base colour" setting
 * in the admin panel, so changing that one setting re-tints the whole product,
 * light theme and dark theme together, with no CSS edit and no rebuild.
 *
 * Two rules keep that safe:
 *
 * Lightness is clamped, never used raw. A brand colour picked for a logo can be
 * far too pale or too dark to read as body text on white. The accent ramp below
 * pins lightness into a band that stays legible against each surface, so an
 * unlucky setting degrades to "slightly off-brand" instead of "unreadable".
 *
 * Hue and saturation carry the brand; greys borrow a few degrees of the hue so
 * the neutrals feel related to the accent rather than dropped in from a
 * different palette.
 */

:root {
    /* Fallbacks apply only if color.php did not load. A modern technical blue. */
    --tf-h: var(--base-h, 202);
    --tf-s: var(--base-s, 100%);
    --tf-l: var(--base-l, 35%);

    /* Neutrals stay close to grey; too much hue here turns surfaces muddy. */
    --tf-s-surface: min(var(--tf-s), 30%);
    --tf-s-text: min(var(--tf-s), 14%);

    /* ---- Accent ramp -------------------------------------------------- */
    /* Readable on a light surface: 4.5:1 or better across the whole band. */
    --tf-accent-l: clamp(30%, var(--tf-l), 44%);
    --tf-accent: hsl(var(--tf-h) var(--tf-s) var(--tf-accent-l));
    --tf-accent-deep: hsl(var(--tf-h) var(--tf-s) calc(var(--tf-accent-l) - 10%));
    /* The bright end of the gradient leans a little cooler, which is what makes
       the pairing read as a gradient rather than as two flat tints. */
    --tf-accent-bright: hsl(calc(var(--tf-h) + 12) var(--tf-s) clamp(42%, calc(var(--tf-l) + 16%), 62%));
    --tf-accent-soft: hsl(var(--tf-h) var(--tf-s) 96%);
    --tf-accent-line: hsl(var(--tf-h) var(--tf-s) 50% / .18);

    --tf-gradient: linear-gradient(135deg, var(--tf-accent-deep), var(--tf-accent-bright));

    /* ---- Surfaces ----------------------------------------------------- */
    --tf-bg: hsl(var(--tf-h) var(--tf-s-surface) 97%);
    --tf-bg-2: hsl(var(--tf-h) var(--tf-s-surface) 94%);
    --tf-surface: #fff;
    --tf-surface-2: hsl(var(--tf-h) var(--tf-s-surface) 98.5%);
    --tf-surface-hover: hsl(var(--tf-h) var(--tf-s-surface) 95%);
    --tf-border: var(--tf-accent-line);
    --tf-border-strong: hsl(var(--tf-h) var(--tf-s) 50% / .32);

    /* ---- Ink ---------------------------------------------------------- */
    --tf-strong: hsl(var(--tf-h) calc(var(--tf-s-text) + 8%) 9%);
    --tf-text: hsl(var(--tf-h) var(--tf-s-text) 18%);
    --tf-prose: hsl(var(--tf-h) var(--tf-s-text) 34%);
    --tf-muted: hsl(var(--tf-h) var(--tf-s-text) 47%);
    --tf-on-accent: #fff;

    /* ---- Status ------------------------------------------------------- */
    --tf-ok: #15803d;
    --tf-ok-bg: #f0fdf4;
    --tf-warn: #a16207;
    --tf-warn-bg: #fefce8;
    --tf-bad: #b91c1c;
    --tf-bad-bg: #fef2f2;
    --tf-info: var(--tf-accent);
    --tf-info-bg: var(--tf-accent-soft);

    /* ---- Depth -------------------------------------------------------- */
    /* Shadows are tinted with the brand hue rather than pure black, which is
       what stops a light UI from looking dusty. */
    --tf-shadow-sm: 0 1px 2px hsl(var(--tf-h) 40% 25% / .06);
    --tf-shadow: 0 1px 2px hsl(var(--tf-h) 40% 25% / .05), 0 8px 28px hsl(var(--tf-h) 60% 45% / .09);
    --tf-shadow-lg: 0 18px 48px hsl(var(--tf-h) 55% 35% / .16);
    --tf-glow: 0 6px 20px hsl(var(--tf-h) var(--tf-s) 45% / .28);

    /* ---- Geometry ----------------------------------------------------- */
    --tf-radius-sm: .5rem;
    --tf-radius: .75rem;
    --tf-radius-lg: 1rem;
    --tf-radius-xl: 1.35rem;
    --tf-pill: 999px;

    /* A 4px-based spacing scale. Sections and cards only use steps from here. */
    --tf-1: .25rem;
    --tf-2: .5rem;
    --tf-3: .75rem;
    --tf-4: 1rem;
    --tf-5: 1.5rem;
    --tf-6: 2rem;
    --tf-7: 3rem;
    --tf-8: 5rem;

    --tf-container: 1180px;
    --tf-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tf-mono: ui-monospace, 'JetBrains Mono', Consolas, monospace;

    --tf-ease: cubic-bezier(.4, 0, .2, 1);
}

/*
 * Dark theme.
 *
 * Not an inversion. The background takes a deep, heavily desaturated cast of
 * the brand hue so the accent still belongs to it, surfaces are lifted with
 * translucent brand tint rather than flat grey, and the accent moves up the
 * lightness band because the same hue that reads well on white disappears
 * against near-black.
 */
[data-theme="dark"] {
    --tf-accent-l: clamp(55%, calc(var(--tf-l) + 18%), 74%);
    --tf-accent-soft: hsl(var(--tf-h) var(--tf-s) 60% / .14);
    --tf-accent-line: hsl(var(--tf-h) var(--tf-s) 62% / .24);

    --tf-bg: hsl(var(--tf-h) calc(var(--tf-s-surface) + 18%) 5%);
    --tf-bg-2: hsl(var(--tf-h) calc(var(--tf-s-surface) + 16%) 8%);
    --tf-surface: hsl(var(--tf-h) calc(var(--tf-s-surface) + 14%) 10%);
    --tf-surface-2: hsl(var(--tf-h) calc(var(--tf-s-surface) + 14%) 12.5%);
    --tf-surface-hover: hsl(var(--tf-h) calc(var(--tf-s-surface) + 14%) 16%);
    --tf-border: var(--tf-accent-line);
    --tf-border-strong: hsl(var(--tf-h) var(--tf-s) 62% / .4);

    --tf-strong: hsl(var(--tf-h) 30% 98%);
    --tf-text: hsl(var(--tf-h) 18% 88%);
    --tf-prose: hsl(var(--tf-h) 14% 74%);
    --tf-muted: hsl(var(--tf-h) 12% 62%);

    --tf-ok: #86efac;
    --tf-ok-bg: hsl(142 60% 40% / .14);
    --tf-warn: #fcd34d;
    --tf-warn-bg: hsl(45 90% 50% / .14);
    --tf-bad: #fca5a5;
    --tf-bad-bg: hsl(0 70% 55% / .14);

    --tf-shadow-sm: 0 1px 2px #0008;
    --tf-shadow: 0 2px 4px #0006, 0 12px 34px #0009;
    --tf-shadow-lg: 0 22px 56px #000a;
    --tf-glow: 0 6px 24px hsl(var(--tf-h) var(--tf-s) 50% / .35);

    color-scheme: dark;
}

/* Respect the operating system until the visitor makes an explicit choice. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tf-accent-l: clamp(55%, calc(var(--tf-l) + 18%), 74%);
        --tf-accent-soft: hsl(var(--tf-h) var(--tf-s) 60% / .14);
        --tf-accent-line: hsl(var(--tf-h) var(--tf-s) 62% / .24);

        --tf-bg: hsl(var(--tf-h) calc(var(--tf-s-surface) + 18%) 5%);
        --tf-bg-2: hsl(var(--tf-h) calc(var(--tf-s-surface) + 16%) 8%);
        --tf-surface: hsl(var(--tf-h) calc(var(--tf-s-surface) + 14%) 10%);
        --tf-surface-2: hsl(var(--tf-h) calc(var(--tf-s-surface) + 14%) 12.5%);
        --tf-surface-hover: hsl(var(--tf-h) calc(var(--tf-s-surface) + 14%) 16%);
        --tf-border: var(--tf-accent-line);
        --tf-border-strong: hsl(var(--tf-h) var(--tf-s) 62% / .4);

        --tf-strong: hsl(var(--tf-h) 30% 98%);
        --tf-text: hsl(var(--tf-h) 18% 88%);
        --tf-prose: hsl(var(--tf-h) 14% 74%);
        --tf-muted: hsl(var(--tf-h) 12% 62%);

        --tf-ok: #86efac;
        --tf-ok-bg: hsl(142 60% 40% / .14);
        --tf-warn: #fcd34d;
        --tf-warn-bg: hsl(45 90% 50% / .14);
        --tf-bad: #fca5a5;
        --tf-bad-bg: hsl(0 70% 55% / .14);

        --tf-shadow-sm: 0 1px 2px #0008;
        --tf-shadow: 0 2px 4px #0006, 0 12px 34px #0009;
        --tf-shadow-lg: 0 22px 56px #000a;
        --tf-glow: 0 6px 24px hsl(var(--tf-h) var(--tf-s) 50% / .35);

        color-scheme: dark;
    }
}