/* Brand tokens for the customer-facing site. :root is Real Food Kitchen; each other brand overrides on html[data-brand]. */
:root {
    --brand-primary: #f05a28;
    --brand-primary-rgb: 240, 90, 40;
    --brand-primary-light: #ff6f3c;
    --brand-primary-dark: #d94a1a;
    --brand-primary-hover: #d94d20;
    --brand-primary-tint: #fff1eb;
    --brand-primary-shade-rgb: 232, 90, 27;
    --brand-primary-glow: #ff7043;
    --brand-primary-glow-soft: #ff8a5c;

    --brand-cta: #ff6b00;
    --brand-cta-rgb: 255, 107, 0;
    --brand-cta-light: #ff8533;
    --brand-cta-dark: #e65c00;
    --brand-cta-deep: #e65a00;
    --brand-cta-tint: #fff7ed;
    --brand-cta-tint-soft: #fff5f0;
    --brand-cta-tint-strong: #ffedd5;
    --brand-cta-border: #fed7aa;

    --brand-accent: #83ad95;
    --brand-accent-rgb: 131, 173, 149;
    --brand-accent-light: #9dc4ab;
    --brand-accent-dark: #6a9479;
    --brand-accent-glow: #9ccc65;

    --brand-ink: #000000;
    --brand-ink-soft: #1a1a1a;
    --brand-ink-soft-rgb: 26, 26, 26;
    --brand-ink-raised: #2d2d2d;

    --font-heading: 'Bebas Neue', Impact, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-ui: 'Rubik', sans-serif;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-input: 8px;
    --radius-button: 10px;
    --radius-md: 12px;
    --radius-card: 16px;
    --radius-lg: 20px;
    --radius-pill: 50px;
}

html[data-brand="demo"] {
    --brand-primary: #2f7d5b;
    --brand-primary-rgb: 47, 125, 91;
    --brand-primary-light: #3f9a72;
    --brand-primary-dark: #22603f;
    --brand-primary-hover: #276b4d;
    --brand-primary-tint: #e9f4ee;
    --brand-primary-shade-rgb: 38, 110, 79;
    --brand-primary-glow: #4fae80;
    --brand-primary-glow-soft: #6cc095;

    --brand-cta: #d9822b;
    --brand-cta-rgb: 217, 130, 43;
    --brand-cta-light: #e89d4f;
    --brand-cta-dark: #bf6e1f;
    --brand-cta-deep: #a95f18;
    --brand-cta-tint: #fbf3e9;
    --brand-cta-tint-soft: #fdf8f2;
    --brand-cta-tint-strong: #f6e3cc;
    --brand-cta-border: #ecc89f;

    --brand-accent: #c9a96e;
    --brand-accent-rgb: 201, 169, 110;
    --brand-accent-light: #dcc394;
    --brand-accent-dark: #a88a52;
    --brand-accent-glow: #e3cf9a;

    --brand-ink: #10261c;
    --brand-ink-soft: #1d3328;
    --brand-ink-soft-rgb: 29, 51, 40;
    --brand-ink-raised: #2b4638;

    --font-heading: 'Fraunces', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --font-ui: 'DM Sans', sans-serif;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-input: 12px;
    --radius-button: 999px;
    --radius-md: 18px;
    --radius-card: 24px;
    --radius-lg: 28px;
    --radius-pill: 999px;
}

.brand-wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    color: var(--brand-ink-soft);
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.brand-wordmark small {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-top: 4px;
}