/* ==========================================================================
   Timzo design tokens
   --------------------------------------------------------------------------
   The single source of truth for the look. MudBlazor components get these
   same values through TimzoTheme.Build(); everything hand-rolled (the timer
   pill, entry rows, the sign-in card) reads them from here.

   Deliberately not Clockify: violet accent instead of bright blue, warm
   off-white paper instead of cold white, soft layered shadows, 14px corners.
   ========================================================================== */

:root {
    /* Accent ramp */
    --tz-accent: #6D4AFF;
    --tz-accent-strong: #5836E8;
    --tz-accent-soft: #8F76FF;
    --tz-accent-wash: rgba(109, 74, 255, 0.10);
    --tz-accent-wash-strong: rgba(109, 74, 255, 0.18);

    /* Support colours */
    --tz-teal: #12B5A3;
    --tz-amber: #E8A33D;
    --tz-rose: #E2536B;
    --tz-running: #12B5A3;

    /* Warm neutral surfaces */
    --tz-canvas: #F7F5F1;
    --tz-surface-1: #FFFDFA;
    --tz-surface-2: #F2EFE9;
    --tz-surface-3: #E9E5DD;

    /* Ink */
    --tz-ink-1: #1E1B26;
    --tz-ink-2: #615C70;
    --tz-ink-3: #948FA2;

    --tz-line: #E9E4DC;
    --tz-line-strong: #D8D2C8;

    /* Shape */
    --tz-radius-sm: 8px;
    --tz-radius: 14px;
    --tz-radius-lg: 20px;
    --tz-radius-pill: 999px;

    /* Elevation — low-spread, layered, never a hard drop shadow */
    --tz-shadow-1: 0 1px 2px rgba(30, 27, 38, 0.04), 0 2px 8px rgba(30, 27, 38, 0.05);
    --tz-shadow-2: 0 2px 4px rgba(30, 27, 38, 0.05), 0 12px 28px rgba(30, 27, 38, 0.08);
    --tz-shadow-accent: 0 6px 20px rgba(109, 74, 255, 0.28);

    /* Spacing scale */
    --tz-space-1: 4px;
    --tz-space-2: 8px;
    --tz-space-3: 12px;
    --tz-space-4: 16px;
    --tz-space-5: 24px;
    --tz-space-6: 32px;
    --tz-space-7: 48px;

    --tz-topbar-height: 68px;
    --tz-content-width: 1120px;

    --tz-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Inter, "Helvetica Neue", sans-serif;
    --tz-font-numeric: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Inter, sans-serif;

    --tz-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Dark theme. The class is stamped on <html> — server-side from the stored preference so the first paint is
   already correct, and by TimzoProviders once the browser has answered "match system". Swapping the token
   values here is all it takes; every custom surface follows without extra rules.
   (Note: MudBlazor does NOT put a theme class on <body>, so keying off one would silently never match.) */
html.tz-dark {
    --tz-accent: #8F76FF;
    --tz-accent-strong: #A38FFF;
    --tz-accent-soft: #6D4AFF;
    --tz-accent-wash: rgba(143, 118, 255, 0.14);
    --tz-accent-wash-strong: rgba(143, 118, 255, 0.24);

    --tz-teal: #2ED3BF;
    --tz-amber: #F0B75C;
    --tz-rose: #F0788C;
    --tz-running: #2ED3BF;

    --tz-canvas: #14121A;
    --tz-surface-1: #1D1A25;
    --tz-surface-2: #232030;
    --tz-surface-3: #2C2839;

    --tz-ink-1: #F3F1F7;
    --tz-ink-2: #A9A3B8;
    --tz-ink-3: #7C7690;

    --tz-line: #2A2635;
    --tz-line-strong: #3A3548;

    --tz-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.24);
    --tz-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 12px 28px rgba(0, 0, 0, 0.40);
    --tz-shadow-accent: 0 6px 20px rgba(109, 74, 255, 0.40);
}