/* 00_tokens.css — Design tokens (single source: styles.py COLORS/COLORS_DARK).
   The dark palette activates via html[data-theme="dark"], stamped by
   assets/theme.js before first paint and kept in sync by a clientside
   callback bound to the persisted theme store. */

:root {
    color-scheme: light;

    /* Backgrounds */
    --bg-page: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f5f5f5;
    --bg-green-light: #d4fae8;
    --surface-warm: #fafaf8;

    /* Text */
    --text-primary: #0d0d0d;
    --text-secondary: #333333;
    --text-muted: #737373;
    --text-gray: #888888;

    /* Brand */
    --brand-green: #1D9E75;
    --brand-green-accent: #18E299;   /* data viz / highlights only */
    --brand-green-deep: #0fa76e;
    --brand-green-hover: #168a63;
    --brand-navy: #1e293b;

    /* Semantic */
    --success: #059669;
    --success-light: #d4fae8;
    --error: #d45656;
    --trust-blue: #1e40af;

    /* Borders */
    --border: rgba(0, 0, 0, 0.05);
    --border-medium: rgba(0, 0, 0, 0.08);
    --border-opaque: #e8e8e8;

    /* Logo knockout (bowl cutout of the R mark) */
    --logo-cutout: #ffffff;

    /* Third-party share-button brand colors (theme-invariant) */
    --share-linkedin: #0A66C2;
    --share-whatsapp: #25D366;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Backgrounds */
    --bg-page: #121212;
    --bg-card: #1e1e1e;
    --bg-hover: #2a2a2a;
    --bg-green-light: #0d2818;
    --surface-warm: #1a1a18;

    /* Text */
    --text-primary: #e8e8e8;
    --text-secondary: #cccccc;
    --text-muted: #a0a0a0;
    --text-gray: #8a8a8a;

    /* Brand */
    --brand-green: #1D9E75;
    --brand-green-accent: #18E299;
    --brand-green-deep: #22b985;
    --brand-green-hover: #25c48e;
    --brand-navy: #94a3b8;

    /* Semantic */
    --success: #34d399;
    --success-light: #0d2818;
    --error: #f87171;
    --trust-blue: #60a5fa;

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-opaque: #333333;

    --logo-cutout: #1e1e1e;

    /* Dash 4.4 component design tokens. dcc.Dropdown (Radix) and
       dcc.DatePickerSingle render with these `--Dash-*` variables, whose light
       defaults (`--Dash-Fill-Inverse-Strong: #fff`, dark navy text) leave the
       select/date boxes and popups WHITE with near-white text in dark mode —
       illegible. Remap them to the dark palette so those controls follow the
       theme (dark box + near-white text). This themes every dcc control at once;
       no per-class overrides needed. */
    --Dash-Fill-Inverse-Strong: var(--bg-card);      /* trigger + popup surface */
    --Dash-Text-Strong: var(--text-primary);         /* value text, caret icon */
    --Dash-Text-Primary: var(--text-primary);        /* option / day text */
    --Dash-Text-Weak: var(--text-muted);             /* placeholder / muted */
    --Dash-Text-Disabled: var(--text-gray);
    --Dash-Stroke-Strong: var(--border-opaque);      /* control border */
    --Dash-Stroke-Weak: var(--border-medium);
    --Dash-Fill-Interactive-Strong: var(--brand-green);  /* selected accent (was purple) */
    --Dash-Fill-Primary-Hover: rgba(29, 158, 117, 0.12);
    --Dash-Fill-Primary-Active: rgba(29, 158, 117, 0.20);
    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.06);
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.60);      /* popup drop shadow */
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.40);
}

/* Theme visibility helpers: the toggle shows the label of the TARGET mode */
.theme-label-to-light { display: none; }
.theme-label-to-dark { display: inline; }
html[data-theme="dark"] .theme-label-to-light { display: inline; }
html[data-theme="dark"] .theme-label-to-dark { display: none; }