/* Channel Workbench design tokens.
   Light values live on :root; dark values under :root[data-theme="dark"].
   The head script in App.razor always stamps data-theme explicitly (resolving
   the OS preference when the user hasn't chosen), so component CSS reads these
   variables only — no prefers-color-scheme blocks anywhere else.
   Rule of thumb for authors: text on saturated fills (e.g. white on a red
   button) stays literal #fff; every other color goes through a token. */
:root {
    color-scheme: light;

    /* Brand — YouTube-inspired red */
    --cw-primary: #DC2626;
    /* hover/pressed for primary fills */
    --cw-primary-700: #991B1B;
    --cw-primary-dark: #991B1B;
    --cw-primary-soft: #FEE2E2;
    --cw-primary-bright: #EF4444;

    /* Neutrals */
    --cw-ink: #0F172A;
    --cw-ink-2: #334155;
    --cw-text: #475569;
    --cw-text-soft: #64748B;
    --cw-muted: #94A3B8;
    --cw-faint: #CBD5E1;
    --cw-border: #E2E8F0;
    --cw-gridline: #EDF0F4;
    --cw-card: #FFFFFF;
    --cw-bg: #FFFFFF;
    --cw-surface: #F8FAFC;
    --cw-well: #F1F5F9;

    /* Status — accent is amber for warm, money/creator-economy energy */
    --cw-accent: #F59E0B;
    --cw-accent-soft: #FEF3C7;
    --cw-critical: #B91C1C;
    --cw-high: #EA580C;
    --cw-medium: #CA8A04;
    --cw-low: #64748B;
    --cw-success: #059669;

    /* Soft tint trios: pale background + muted border + dark readable text.
       Banners, chips, badges, callouts. */
    --cw-red-bg: #FEF2F2;
    --cw-red-border: #FECACA;
    --cw-red-text: #B91C1C;
    --cw-red-text-strong: #991B1B;
    --cw-green-bg: #ECFDF5;
    --cw-green-border: #A7F3D0;
    --cw-green-text: #047857;
    --cw-green-text-strong: #065F46;
    --cw-amber-bg: #FFFBEB;
    --cw-amber-border: #FDE68A;
    --cw-amber-text: #92400E;
    --cw-orange-bg: #FFF7ED;
    --cw-orange-border: #FED7AA;
    --cw-orange-text: #9A3412;
    --cw-blue-bg: #EFF6FF;
    --cw-blue-border: #BFDBFE;
    --cw-blue-text: #1E40AF;
    --cw-indigo-bg: #EEF2FF;
    --cw-indigo-text: #3730A3;
    --cw-violet-bg: #EDE9FE;
    --cw-violet-text: #7C3AED;

    /* Saturated fills for charts, dots, and small solid marks. */
    --cw-red-fill: #DC2626;
    --cw-green-fill: #16A34A;
    --cw-blue-fill: #2563EB;
    --cw-amber-fill: #CA8A04;
    --cw-orange-fill: #EA580C;
    --cw-neutral-fill: #94A3B8;

    /* Type */
    --cw-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Radii / shadows */
    --cw-radius: 8px;
    --cw-radius-lg: 14px;
    --cw-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
    --cw-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --cw-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

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

    /* Brand: the red fill holds in both modes (white text on top);
       hover goes lighter instead of darker on a dark ground. */
    --cw-primary-700: #EF4444;
    --cw-primary-dark: #EF4444;
    --cw-primary-soft: #3D1E26;
    --cw-primary-bright: #F87171;

    --cw-ink: #E7ECF6;
    --cw-ink-2: #C7D0E0;
    --cw-text: #A7B2C7;
    --cw-text-soft: #8D99B0;
    --cw-muted: #64718C;
    --cw-faint: #3D4A66;
    --cw-border: #263450;
    --cw-gridline: #1E2A44;
    --cw-card: #141E33;
    --cw-bg: #141E33;
    --cw-surface: #0C1424;
    --cw-well: #1B2740;

    --cw-accent: #FBBF24;
    --cw-accent-soft: #2E2410;
    --cw-critical: #F0A8AC;
    --cw-high: #FB923C;
    --cw-medium: #EAB308;
    --cw-low: #8D99B0;
    --cw-success: #34D399;

    --cw-red-bg: #351A21;
    --cw-red-border: #5D2630;
    --cw-red-text: #F0A8AC;
    --cw-red-text-strong: #F5C2C4;
    --cw-green-bg: #10291F;
    --cw-green-border: #1E4A38;
    --cw-green-text: #57D9A5;
    --cw-green-text-strong: #7BE3B8;
    --cw-amber-bg: #2E2410;
    --cw-amber-border: #54421A;
    --cw-amber-text: #EFC75E;
    --cw-orange-bg: #331E10;
    --cw-orange-border: #5C351A;
    --cw-orange-text: #F5A76C;
    --cw-blue-bg: #14233B;
    --cw-blue-border: #27436B;
    --cw-blue-text: #8FBFF5;
    --cw-indigo-bg: #1E2342;
    --cw-indigo-text: #A8B3F5;
    --cw-violet-bg: #251E42;
    --cw-violet-text: #B49AF0;

    --cw-red-fill: #EF4444;
    --cw-green-fill: #22C55E;
    --cw-blue-fill: #3B82F6;
    --cw-amber-fill: #EAB308;
    --cw-orange-fill: #F97316;
    --cw-neutral-fill: #7C8BA6;

    --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
    --cw-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --cw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}