/*
 * Design system: brand. Every brand colour; a re-brand edits this file only. Load it right after tokens.css.
 * Both ramps run dark to light: 0 is black, 1000 is white.
 */

:root {
    /* ─── Hero ramp ──────────────────────────────────────────────────────────
       21 steps. Components use 200–850 for tinted surfaces and their text. */
    --ds-hero-1000: #fff;
    --ds-hero-950: #f0fdff;
    --ds-hero-900: #e6fcff;
    --ds-hero-850: #d1f9ff;
    --ds-hero-800: #b8f5ff;
    --ds-hero-750: #99f1ff;
    --ds-hero-700: #7bedff;
    --ds-hero-650: #5ce9ff;
    --ds-hero-600: #3ee5ff;
    --ds-hero-550: #1fe1ff;
    --ds-hero-500: #0df;
    --ds-hero-450: #00c2e0;
    --ds-hero-400: #00a8c2;
    --ds-hero-350: #008da3;
    --ds-hero-300: #007385;
    --ds-hero-250: #005866;
    --ds-hero-200: #003e47;
    --ds-hero-150: #00282e;
    --ds-hero-100: #00161a;
    --ds-hero-50: #00090a;
    --ds-hero-0: #000;

    /* ─── Accent ramp (Button) ───────────────────────────────────────────────
       Each step darker. The button accent and the toggle colour below are separate choices. */
    --ds-accent-default: #00b3cf;
    --ds-accent-hover: #009bb4;
    --ds-accent-focus: #00879d;
    --ds-accent-press: #007385;

    /* ─── Roles ──────────────────────────────────────────────────────────── */
    --ds-color-primary: var(--ds-accent-default);
    --ds-color-toggle-on: var(--ds-hero-450);
    --ds-color-text-on-accent: var(--ds-bnw-1000);
}