/*
 * Design tokens (Traffix theme token standard, v1).
 *
 * The single place where the theme's colours are declared. Every other file
 * uses var(--theme-*) only. A site is recoloured by redeclaring these
 * properties in a later :root block (traffix-settings prints it in <head>);
 * the theme files themselves are never edited per site.
 *
 * Base tokens hold literal colours. Derived tokens are expressions of base
 * tokens, so a palette that sets only the base ones still stays consistent.
 * Defaults reproduce the original light sky-blue look of mono-brend 2.0.0.
 *
 * Declared under :where(:root) - zero specificity - so a palette printed as a
 * plain :root block wins wherever it appears in <head>, before or after this file.
 *
 * Standard: packages/contracts/theme-tokens.md in the Traffix Hub repository.
 */

:where(:root) {
    /* Backgrounds */
    --theme-bg-base: #dff0fa;
    --theme-bg-card: #f5fbff;
    --theme-bg-elevated: #ecf7fd;
    --theme-bg-deep: #c5e4f7;
    --theme-surface: #ffffff;
    --theme-surface-divider: #f2f2f3;
    --theme-glow-top: var(--theme-bg-deep);
    --theme-glow-bottom: #e8f6fc;
    --theme-page-gradient: linear-gradient(160deg, var(--theme-glow-top) 0%, var(--theme-bg-base) 55%, var(--theme-glow-bottom) 100%);
    --theme-header-glass: var(--theme-bg-deep);
    --theme-overlay: rgba(13, 51, 73, 0.76);
    --theme-scrim: rgba(26, 74, 102, 0.6);

    /* Text */
    --theme-text: #1a4a66;
    --theme-text-muted: #356b87;
    --theme-text-soft: #5a8aa3;
    --theme-text-caption: #5d6066;
    --theme-inverse-bg: var(--theme-text);
    --theme-inverse-text: #ffffff;

    /* Accent: links, markers, active states */
    --theme-accent: #2b8fc4;
    --theme-accent-light: #4aa8d4;
    --theme-accent-glow: rgba(120, 190, 230, 0.35);
    --theme-on-accent: #ffffff;
    --theme-bullet: var(--theme-accent);
    --theme-rating: #f5a623;

    /* Primary call to action */
    --theme-cta-from: #ffd4b8;
    --theme-cta-to: var(--theme-cta-from);
    --theme-cta-hover: #ffe2cc;
    --theme-cta-text: #7a4e2e;
    --theme-cta-strong: #ffc9a3;
    --theme-cta-border: rgba(255, 190, 150, 0.9);
    --theme-cta-glow: rgba(255, 200, 160, 0.65);
    --theme-cta-background: linear-gradient(135deg, var(--theme-cta-from) 0%, var(--theme-cta-to) 100%);

    /* Secondary (outline) buttons and the header "Log In" button */
    --theme-secondary-bg: var(--theme-cta-from);
    --theme-secondary-border: color-mix(in srgb, var(--theme-cta-border) 39%, transparent);
    --theme-secondary-text: var(--theme-cta-text);
    --theme-secondary-hover: var(--theme-cta-hover);
    --theme-login-bg: var(--theme-cta-strong);
    --theme-login-text: var(--theme-cta-text);
    --theme-login-hover: var(--theme-cta-hover);
    --theme-login-border: var(--theme-cta-border);

    /* Borders and dividers */
    --theme-border: rgba(120, 180, 220, 0.45);
    --theme-border-strong: rgba(90, 165, 210, 0.55);
    --theme-divider: #d9dce1;
    --theme-divider-strong: #bebec7;
    --theme-shadow-tint: rgb(120, 190, 230);

    /* Tables */
    --theme-table-head: var(--theme-bg-deep);
    --theme-table-head-text: var(--theme-text);
    --theme-table-border: var(--theme-border);
    --theme-table-row: transparent;
    --theme-table-zebra: var(--theme-bg-elevated);

    /* Age bar above the header and the footer */
    --theme-topbar-bg: #1d2129;
    --theme-topbar-text: rgba(255, 255, 255, 0.6);
    --theme-topbar-strong: #ffffff;
    --theme-footer-from: #09101f;
    --theme-footer-to: #012325;
    --theme-footer-text: #f8faff;

    /* Warning callout and icon-card note */
    --theme-callout-bg: #fdf3e3;
    --theme-callout-border: #e8c99a;
    --theme-callout-accent: #c97f30;
    --theme-callout-text: #7a4e2e;

    /* Icon-card tones */
    --theme-tone-orange-bg: #ffecd9;
    --theme-tone-orange-text: #7a4e2e;
    --theme-tone-violet-bg: #ede8ff;
    --theme-tone-violet-text: #5441a6;
    --theme-tone-blue-bg: #d6eef9;
    --theme-tone-blue-text: #1a6490;
    --theme-tone-pink-bg: #ffd6e8;
    --theme-tone-pink-text: #9a3060;
    --theme-tone-green-bg: #d5f0e0;
    --theme-tone-green-text: #1a6e2e;
}