/* 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, #d4af37, #996515);
    --theme-btn-text: #0a1733;
    --theme-btn-hbg: linear-gradient(90deg, #996515, #d4af37);
    --theme-btn-htext: #0a1733;
    --theme-btn-outline-ring: #d4af37;
    --theme-btn-outline-text: #d4af37;
    --theme-btn-outline-hbg: linear-gradient(90deg, #d4af37, #996515);
    --theme-btn-outline-htext: #03210f;
    --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, stepped between the brand's own background and surface */
    --navy-950: #070c1c;
    --navy-850: #0f1830;
    --navy-900: #0a1023;
    --navy-800: #141f3a;

    /* 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: #d4af37;
    --accent-700: #5d4c13;
    --accent-600: #996515;
    --accent-400: #e4bf4a;
    --accent-300: #ecdcae;
    --accent-200: #f2e7c9;
    --accent-100: #fbf7ed;
    --accent-ink: #0a1733;
    --accent-glow: rgba(212, 175, 55, 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: #15203d;
    --border: #1d2b4d;
    --border-strong: #2f3e62;

    /* figures — the big numbers */
    --figure-ink: #d4af37;

    /* 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: #040817;
    --scrim: rgba(4, 8, 23, 0.94);
    --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-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-a40: rgba(47, 107, 255, 0.4);
    --accent-500-a8: rgba(212, 175, 55, 0.08);
    --accent-500-a12: rgba(212, 175, 55, 0.12);
    --accent-500-a30: rgba(212, 175, 55, 0.3);
    --accent-500-a40: rgba(212, 175, 55, 0.4);
    --accent-400-a10: rgba(228, 191, 74, 0.1);
    --accent-400-a28: rgba(228, 191, 74, 0.28);
    --green-500-a12: rgba(37, 211, 102, 0.12);
    --green-500-a35: rgba(37, 211, 102, 0.35);
    --green-500-a40: rgba(37, 211, 102, 0.4);
    --red-400-a30: rgba(255, 110, 123, 0.3);
    --red-500-a10: rgba(255, 82, 99, 0.1);
    --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-300-a16: rgba(99, 167, 255, 0.16);
    --blue-300-a30: rgba(99, 167, 255, 0.3);
    --card-2-a98: rgba(11, 18, 37, 0.98);

    /* gradients — the brand's own, from its gradients block */
    --grad-page: radial-gradient(1200px 600px at 50% -10%, #14224a 0%, #070c1c 55%);
    --grad-button: linear-gradient(180deg,#3b78ff,#2f6bff);
    --grad-card: linear-gradient(180deg,#101a34,#0d1730);
    --grad-rank-bar: linear-gradient(90deg, color-mix(in srgb, #2f6bff 85%, transparent), color-mix(in srgb, #2f6bff 8%, transparent));

    /* elevation */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.18), 0 10px 28px -16px rgba(0, 0, 0, 0.55);
    --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.2), 0 14px 32px -14px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.35);
}