/* ============================================================================
   sv-theme.css - design tokens for stitts-vegas.com / The Hartsmere Poker Tour
   Dark-first felt/casino palette. DARK IS THE DEFAULT for every visitor.

   Theme resolution:
     :root                     -> dark (felt)  <- the default on arrival
     :root[data-theme="light"] -> light (parchment)

   The OS prefers-color-scheme setting is deliberately NOT consulted: dark is
   the intended brand look, so arriving visitors always get felt. js/sv-theme.js
   writes an explicit data-theme once the visitor uses the toggle, and that
   choice persists in localStorage.

   Because dark lives on bare :root, visitors with JavaScript disabled - and the
   first paint before any script runs - still get the dark theme, with no flash.
   ========================================================================= */

:root {
    /* ---- dark (default): felt green + charcoal, amber accent -------------- */
    --sv-bg:              #0B1F1A;
    --sv-bg-pattern:      rgba(255, 255, 255, 0.022);
    --sv-surface:         #14302A;
    --sv-surface-2:       #1B3B33;
    --sv-surface-3:       #23473D;
    --sv-felt:            #0E2A22;
    --sv-felt-edge:       rgba(0, 0, 0, 0.55);

    --sv-border:          #2C4F45;
    --sv-border-strong:   #3E6659;

    --sv-text:            #E8EFE9;
    --sv-text-muted:      #A6BCB1;
    --sv-text-faint:      #7B9389;
    --sv-heading:         #F2F7F1;

    --sv-accent:          #E0A82E;
    --sv-accent-hover:    #F0BC4A;
    --sv-accent-ink:      #17130A;
    --sv-accent-soft:     rgba(224, 168, 46, 0.16);
    --sv-accent-ring:     rgba(224, 168, 46, 0.55);

    --sv-green:           #37A87E;
    --sv-green-soft:      rgba(55, 168, 126, 0.16);

    --sv-link:            #7FD3B4;
    --sv-link-hover:      #A5E4CB;
    --sv-link-visited:    #C4B79A;

    --sv-success:         #45C08D;
    --sv-success-soft:    rgba(69, 192, 141, 0.16);
    --sv-warn:            #E0A82E;
    --sv-warn-soft:       rgba(224, 168, 46, 0.16);
    --sv-danger:          #F0705C;
    --sv-danger-soft:     rgba(240, 112, 92, 0.16);
    --sv-info:            #63B3E0;
    --sv-info-soft:       rgba(99, 179, 224, 0.16);

    --sv-shadow-1:        0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --sv-shadow-2:        0 2px 8px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.38);
    --sv-shadow-3:        0 12px 34px rgba(0, 0, 0, 0.55);
    --sv-inset:           inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* chart palette - dark */
    --sv-chart-1:         #45C08D;
    --sv-chart-2:         #E0A82E;
    --sv-chart-3:         #63B3E0;
    --sv-chart-4:         #C08AD0;
    --sv-chart-5:         #E58A5C;
    --sv-chart-pos:       #45C08D;
    --sv-chart-neg:       #F0705C;
    --sv-chart-grid:      rgba(232, 239, 233, 0.12);
    --sv-chart-axis:      rgba(232, 239, 233, 0.40);
    --sv-chart-label:     #A6BCB1;
    /* ink for value labels drawn ON TOP of a bar - dark theme bars are bright,
       so the label must be dark. Inverted for light. */
    --sv-chart-bar-ink:   #10231C;

    /* solid "host" pill: amber fill knocked out with the page ground colour */
    --sv-host-chip-bg:    #E0A82E;

    color-scheme: dark;
}

/* ---- light (opt-in via the toggle): parchment, amber, deep green ink ----- */
:root[data-theme="light"] {
    --sv-bg:              #EFE7D6;
    --sv-bg-pattern:      rgba(15, 58, 45, 0.035);
    --sv-surface:         #FBF7EE;
    --sv-surface-2:       #F3EDDF;
    --sv-surface-3:       #E7DFCB;
    --sv-felt:            #F7F2E5;
    --sv-felt-edge:       rgba(15, 58, 45, 0.10);

    --sv-border:          #D6CBB2;
    --sv-border-strong:   #B9AB8C;

    --sv-text:            #1C2E27;
    --sv-text-muted:      #55655C;
    --sv-text-faint:      #7E8C83;
    --sv-heading:         #123328;

    /* Amber darkened until white text on an amber fill (nav pill, primary
       button) clears WCAG AA for normal text: #9A6A14 vs #FFF is 4.72:1.
       The original #A9761A measured 3.97:1 and failed. */
    --sv-accent:          #9A6A14;
    --sv-accent-hover:    #7E560F;
    --sv-accent-ink:      #FFFFFF;
    --sv-accent-soft:     rgba(154, 106, 20, 0.13);
    --sv-accent-ring:     rgba(154, 106, 20, 0.42);

    --sv-green:           #16604A;
    --sv-green-soft:      rgba(22, 96, 74, 0.12);

    --sv-link:            #14574A;
    --sv-link-hover:      #0C3A31;
    --sv-link-visited:    #4A4030;

    --sv-success:         #1D7A4F;
    --sv-success-soft:    rgba(29, 122, 79, 0.14);
    --sv-warn:            #9A6A08;
    --sv-warn-soft:       rgba(154, 106, 8, 0.14);
    --sv-danger:          #A32617;
    --sv-danger-soft:     rgba(163, 38, 23, 0.12);
    --sv-info:            #1C5C82;
    --sv-info-soft:       rgba(28, 92, 130, 0.12);

    --sv-shadow-1:        0 1px 2px rgba(18, 51, 40, 0.08), 0 1px 3px rgba(18, 51, 40, 0.06);
    --sv-shadow-2:        0 2px 6px rgba(18, 51, 40, 0.10), 0 8px 20px rgba(18, 51, 40, 0.08);
    --sv-shadow-3:        0 10px 30px rgba(18, 51, 40, 0.16);
    --sv-inset:           inset 0 1px 0 rgba(255, 255, 255, 0.75);

    /* chart palette - light */
    --sv-chart-1:         #16604A;
    --sv-chart-2:         #A9761A;
    --sv-chart-3:         #1C5C82;
    --sv-chart-4:         #7A3E86;
    --sv-chart-5:         #A3541C;
    --sv-chart-pos:       #1D7A4F;
    --sv-chart-neg:       #A32617;
    --sv-chart-grid:      rgba(28, 46, 39, 0.14);
    --sv-chart-axis:      rgba(28, 46, 39, 0.45);
    --sv-chart-label:     #55655C;
    /* light-theme bars are dark (deep green / deep red), so on-bar labels
       must be white - black at any opacity is unreadable there */
    --sv-chart-bar-ink:   #FFFFFF;

    /* Darker than --sv-accent on purpose. The pill's text is the parchment page
       colour, and parchment on #9A6A14 is only 3.84:1 - too low for 10px text.
       #8A5E10 brings it to 4.63:1, clearing WCAG AA. */
    --sv-host-chip-bg:    #8A5E10;

    color-scheme: light;
}

:root {
    /* ---- non-colour tokens (shared across themes) ------------------------ */
    --sv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sv-font-display: Georgia, "Times New Roman", "Palatino Linotype", serif;
    --sv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --sv-fs-xs:   0.75rem;
    --sv-fs-sm:   0.8125rem;
    --sv-fs-base: 0.875rem;
    --sv-fs-md:   1rem;
    --sv-fs-lg:   1.125rem;
    --sv-fs-xl:   1.375rem;
    --sv-fs-2xl:  1.75rem;

    --sv-space-1: 4px;
    --sv-space-2: 8px;
    --sv-space-3: 12px;
    --sv-space-4: 16px;
    --sv-space-5: 24px;
    --sv-space-6: 32px;
    --sv-space-7: 48px;

    --sv-radius-sm: 4px;
    --sv-radius:    8px;
    --sv-radius-lg: 12px;
    --sv-radius-pill: 999px;

    --sv-shell-max: 1200px;
    --sv-sidebar-w: 240px;

    --sv-transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}