/*
 * Design tokens. Generated from design-system/tokens.json, then pinned to the
 * values the shipped CSS renders (theme-studio.css, theme-hot.css,
 * theme-morning-crush.css) wherever the two disagree. Disagreements:
 *   - hot / morning-crush --color-text-muted and --color-border are the site's
 *     rgba() values, not the flattened solids in tokens.json.
 *   - tokens.json's dark-ink cta-text for morning-crush is not adopted; the
 *     site keeps cream on amber.
 *
 * Loaded after variables.css and before theme-studio.css, so the theme files
 * still have the last word on the existing --color-* names. :root is Studio,
 * the only theme any page loads today. The hot and morning-crush blocks sit
 * behind data-theme on <html>, which no page sets, so they change nothing until
 * one does. They are :root[data-theme] on purpose: the extra specificity is
 * what lets them beat theme-studio.css's :root block, which loads later.
 */

:root {
    --color-bg:         #FFFFFF;
    --color-text:       #111111;
    --color-text-muted: #5A5A5A;
    --color-accent:     #111111;
    --color-border:     #EBEBEB;
    --color-cta:        #111111;
    --color-cta-hover:  #333333;
    --font-display:     'DM Sans', sans-serif;
    --font-body:        'DM Sans', sans-serif;

    /* Constant across themes. */
    --color-brand-red:       #9D051C;
    --color-brand-red-hover: #7A0416;
    --color-brand-red-tint:  #FFE9EC;
    --color-surface-warm:    #EDEAE4;
    --color-surface-soft:    #F6F6F4;
    --color-success:         #2E7D32;
}

:root[data-theme="hot"] {
    --color-bg:         #000000;
    --color-text:       #FFFFFF;
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-accent:     #FF4E00;
    --color-border:     rgba(255, 78, 0, 0.25);
    --color-cta:        #FF4E00;
    --color-cta-hover:  #FF6820;
}

:root[data-theme="morning-crush"] {
    --color-bg:         #0D0A08;
    --color-text:       #F0E8DF;
    --color-text-muted: rgba(240, 232, 223, 0.5);
    --color-accent:     #C86428;
    --color-border:     rgba(200, 100, 40, 0.18);
    --color-cta:        #C86428;
    --color-cta-hover:  #E07030;
}