/* Compiled from this brand's design-system file. Not a source file:
   change the brand file (or its `_local` block) and reload. */
:root {
    /* brand */
    --primary: #2f6bff;
    --primary-ink: #ffffff;
    --ink: #e3ebf7;
    --muted: #93a4bd;
    --radius: 14px;
    --radius-sm: 10px;
    --theme-btn-radius: var(--radius-sm);
    --theme-btn-bg: linear-gradient(90deg, #19d08a, #11b679);
    --theme-btn-text: #0a1733;
    --theme-btn-hbg: linear-gradient(90deg, #11b679, #19d08a);
    --theme-btn-htext: var(--theme-btn-text);
    --container: 1080px;
    --base-size: 16px;
    --font-body: "Anuphan", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: var(--font-body);
    --font-mono: "Menlo", Consolas, "Courier New", ui-monospace, monospace;

    /* surfaces — the depth scale, carrying the brand hue at the brand lightness */
    --navy-950: #02082c;
    --navy-850: #061440;
    --navy-900: #030c33;
    --navy-800: #0e1d45;

    /* primary scale */
    --blue-700: #0d2769;
    --blue-600: #1a41a1;
    --blue-500: var(--primary);
    --blue-400: #4d8dff;
    --blue-200: #95baff;
    --blue-100: #bfd6ff;

    /* accent — the CTA colour, read from wherever the brand states it */
    --accent-500: #19d08a;
    --accent-700: #055b3a;
    --accent-600: #11b679;
    --accent-400: #3ae199;
    --accent-300: #b0ebca;
    --accent-200: #cbf2db;
    --accent-100: #eefbf3;
    --accent-ink: #0a1733;
    --accent-glow: rgba(25, 208, 138, 0.42);
    --gold-500: var(--accent-500);
    --gold-400: var(--accent-400);

    /* state — green is money-positive only, and is not a brand colour */
    --green-500: #25d366;
    --green-600: #12b357;
    --green-400: #4ce085;
    --green-900: #02240c;
    --red-500: #ff5263;

    /* layers */
    --bg: #070c1c;
    --surface: #0f1830;
    --bg-elev: var(--surface);
    --card: var(--surface);
    --wash: rgba(255, 255, 255, 0.035);
    --wash-2: rgba(255, 255, 255, 0.06);
    --card-2: #0b1225;
    --card-hover: #142249;
    --border: #1d2b4d;
    --border-strong: #2f3e62;

    /* figures — the big numbers, which are painted as clipped gradients */
    --figure-ink: #19d08a;
    --figure-ink-lit: #3ae199;

    /* text */
    --text: var(--ink);
    --text-soft: #ccd5e5;
    --text-dim: var(--muted);

    /* light surfaces — the panels that stay light on a dark page */
    --surface-lit: #fbfcff;
    --surface-lit-2: #eef4ff;
    --border-lit: #c7dcff;
    --ink-on-lit-strong: #111829;
    --ink-on-lit: #494f5e;
    --ink-on-lit-soft: #707581;

    /* scrims and the far ends of the red ramp */
    --ink-deep: #010427;
    --scrim: rgba(1, 4, 39, 0.94);
    --scrim-modal: rgba(4, 18, 66, 0.92);
    --scrim-modal-soft: rgba(4, 18, 66, 0.9);
    --red-800: #5d181f;
    --red-700: #8f2a34;
    --red-600: #e2344c;
    --red-400: #ff6e7b;
    --red-100: #ffd3d2;
    --blue-300: #63a7ff;

    /* brand colours at the opacities the sheets use */
    --primary-a8: rgba(47, 107, 255, 0.08);
    --primary-a12: rgba(47, 107, 255, 0.12);
    --primary-a16: rgba(47, 107, 255, 0.16);
    --primary-a22: rgba(47, 107, 255, 0.22);
    --primary-a25: rgba(47, 107, 255, 0.25);
    --primary-a28: rgba(47, 107, 255, 0.28);
    --primary-a30: rgba(47, 107, 255, 0.3);
    --primary-a35: rgba(47, 107, 255, 0.35);
    --primary-a38: rgba(47, 107, 255, 0.38);
    --primary-a40: rgba(47, 107, 255, 0.4);
    --primary-a45: rgba(47, 107, 255, 0.45);
    --primary-a50: rgba(47, 107, 255, 0.5);
    --primary-a65: rgba(47, 107, 255, 0.65);
    --primary-a70: rgba(47, 107, 255, 0.7);
    --accent-500-a7: rgba(25, 208, 138, 0.07);
    --accent-500-a8: rgba(25, 208, 138, 0.08);
    --accent-500-a10: rgba(25, 208, 138, 0.1);
    --accent-500-a12: rgba(25, 208, 138, 0.12);
    --accent-500-a16: rgba(25, 208, 138, 0.16);
    --accent-500-a18: rgba(25, 208, 138, 0.18);
    --accent-500-a20: rgba(25, 208, 138, 0.2);
    --accent-500-a25: rgba(25, 208, 138, 0.25);
    --accent-500-a30: rgba(25, 208, 138, 0.3);
    --accent-500-a34: rgba(25, 208, 138, 0.34);
    --accent-500-a35: rgba(25, 208, 138, 0.35);
    --accent-500-a38: rgba(25, 208, 138, 0.38);
    --accent-500-a40: rgba(25, 208, 138, 0.4);
    --accent-500-a50: rgba(25, 208, 138, 0.5);
    --accent-500-a55: rgba(25, 208, 138, 0.55);
    --accent-500-a60: rgba(25, 208, 138, 0.6);
    --accent-500-a78: rgba(25, 208, 138, 0.78);
    --accent-500-a85: rgba(25, 208, 138, 0.85);
    --accent-400-a10: rgba(58, 225, 153, 0.1);
    --accent-400-a28: rgba(58, 225, 153, 0.28);
    --accent-400-a45: rgba(58, 225, 153, 0.45);
    --accent-400-a55: rgba(58, 225, 153, 0.55);
    --accent-400-a85: rgba(58, 225, 153, 0.85);
    --accent-400-a90: rgba(58, 225, 153, 0.9);
    --green-500-a8: rgba(37, 211, 102, 0.08);
    --green-500-a12: rgba(37, 211, 102, 0.12);
    --green-500-a16: rgba(37, 211, 102, 0.16);
    --green-500-a35: rgba(37, 211, 102, 0.35);
    --green-500-a40: rgba(37, 211, 102, 0.4);
    --green-500-a60: rgba(37, 211, 102, 0.6);
    --green-500-a70: rgba(37, 211, 102, 0.7);
    --red-400-a30: rgba(255, 110, 123, 0.3);
    --red-500-a8: rgba(255, 82, 99, 0.08);
    --red-500-a10: rgba(255, 82, 99, 0.1);
    --red-500-a16: rgba(255, 82, 99, 0.16);
    --red-500-a28: rgba(255, 82, 99, 0.28);
    --red-500-a30: rgba(255, 82, 99, 0.3);
    --red-500-a40: rgba(255, 82, 99, 0.4);
    --red-600-a24: rgba(226, 52, 76, 0.24);
    --red-700-a54: rgba(143, 42, 52, 0.54);
    --blue-600-a45: rgba(26, 65, 161, 0.45);
    --blue-400-a10: rgba(77, 141, 255, 0.1);
    --blue-300-a16: rgba(99, 167, 255, 0.16);
    --blue-300-a30: rgba(99, 167, 255, 0.3);
    --blue-300-a40: rgba(99, 167, 255, 0.4);
    --card-2-a98: rgba(11, 18, 37, 0.98);
    --navy-850-a98: rgba(6, 20, 64, 0.98);

    /* gradients */
    --grad-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-400) 100%);
    --grad-cta: linear-gradient(90deg, #19d08a, #11b679);
    --grad-blue: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
    --grad-gold: var(--grad-cta);
    --hero-primary-wash: rgba(47, 107, 255, 0.3);
    --hero-accent-wash: rgba(25, 208, 138, 0.12);
    --grad-hero: radial-gradient(1100px 560px at 78% -12%, var(--hero-primary-wash), transparent 60%), radial-gradient(820px 480px at 8% 6%, var(--hero-accent-wash), transparent 55%);

    /* elevation */
    --shadow-card: 0 18px 40px -20px rgba(0, 0, 0, 0.85);
    --shadow-glow: 0 10px 38px -8px var(--accent-glow);
    --shadow-blue-glow: 0 10px 38px -8px rgba(47, 107, 255, 0.5);
}