:root {
    /* Brand colors (synced with ci/brand-colors.html) */
    --color-primary: #ff6a00;     /* ember orange */
    --color-secondary: #ff3b1f;   /* fire red */
    --color-support: #c01515;     /* deep red */
    --color-accent: #ffd166;      /* warm accent */

    /* On-color (contrast) */
    --color-on-primary: #ffffff;
    --color-on-secondary: #ffffff;

    /* Neutrals (dark theme) */
    --color-bg: #0b0b0b;          /* background */
    --color-surface: #1a1a1a;     /* surface */
    --color-muted-text: #9a9a9a;  /* muted */
    --color-border: #2a2a2a;      /* border */
    --color-border-subtle: #2a2a2a;

    /* UI states */
    --color-accent-hover: #ffc94a;      /* accent hover */
    --color-secondary-hover: #e0351c;   /* red hover */
    --color-primary-hover: var(--color-primary);
    --color-disabled: #3a3a3a;

    /* Focus ring color (semi-transparent accent) */
    --color-focus-ring: rgba(255, 209, 102, 0.35);

    --color-black: #2b2e33;
}