/* 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: #ec325f;
    --primary-ink: #ffffff;
    --ink: #fdf1f7;
    --muted: #dcaac9;
    --radius: 14px;
    --radius-sm: 10px;
    --theme-btn-radius: var(--radius-sm);
    --theme-btn-bg: linear-gradient(90deg, #552652, #ec325f);
    --theme-btn-text: #fdf1f7;
    --theme-btn-hbg: linear-gradient(90deg, #552652, #8a3a70);
    --theme-btn-htext: #fdf1f7;
    --theme-btn-outline-ring: #dcaac9;
    --theme-btn-outline-text: #dcaac9;
    --theme-btn-outline-hbg: #dcaac9;
    --theme-btn-outline-htext: #552652;
    --container: 1140px;
    --base-size: 16px;
    --font-body: "Kanit", 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: #331231;
    --navy-850: #552652;
    --navy-900: #3f193c;
    --navy-800: #682d5d;

    /* primary scale */
    --blue-700: #600e22;
    --blue-600: #951c39;
    --blue-500: var(--primary);
    --blue-400: #ff5a7d;
    --blue-200: #ffa3ad;
    --blue-100: #ffc9cd;

    /* accent — the CTA colour, read from wherever the brand states it */
    --accent-500: #ec325f;
    --accent-700: #681026;
    --accent-600: #ec325f;
    --accent-400: #fe466e;
    --accent-300: #ffadb5;
    --accent-200: #ffc9cd;
    --accent-100: #ffedee;
    --accent-ink: #140413;
    --accent-glow: rgba(236, 50, 95, 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: #331231;
    --surface: #552652;
    --bg-elev: var(--surface);
    --card: var(--surface);
    --wash: rgba(255, 255, 255, 0.035);
    --wash-2: rgba(255, 255, 255, 0.06);
    --card-2: #431b40;
    --card-hover: #6c2f5f;
    --border: #8a3a70;
    --border-strong: #a14f86;

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

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

    /* light surfaces — the panels that stay light on a dark page */
    --surface-lit: #fffbfc;
    --surface-lit-2: #fff1f1;
    --border-lit: #ffd0d4;
    --ink-on-lit-strong: #271314;
    --ink-on-lit: #5d4b4c;
    --ink-on-lit-soft: #807272;

    /* scrims and the far ends of the red ramp */
    --ink-deep: #2e0d2c;
    --scrim: rgba(46, 13, 44, 0.94);
    --red-800: #5d181f;
    --red-700: #8f2a34;
    --red-600: #e2344c;
    --red-400: #ff6e7b;
    --red-100: #ffd3d2;
    --blue-300: #ff7595;

    /* brand colours at the opacities the sheets use */
    --primary-a12: rgba(236, 50, 95, 0.12);
    --primary-a16: rgba(236, 50, 95, 0.16);
    --primary-a22: rgba(236, 50, 95, 0.22);
    --primary-a25: rgba(236, 50, 95, 0.25);
    --primary-a40: rgba(236, 50, 95, 0.4);
    --accent-500-a8: rgba(236, 50, 95, 0.08);
    --accent-500-a12: rgba(236, 50, 95, 0.12);
    --accent-500-a30: rgba(236, 50, 95, 0.3);
    --accent-500-a40: rgba(236, 50, 95, 0.4);
    --accent-400-a10: rgba(254, 70, 110, 0.1);
    --accent-400-a28: rgba(254, 70, 110, 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(255, 117, 149, 0.16);
    --blue-300-a30: rgba(255, 117, 149, 0.3);
    --card-2-a98: rgba(67, 27, 64, 0.98);

    /* gradients — the brand's own, from its gradients block */
    --grad-page: radial-gradient(1200px 600px at 50% -10%, #7a2a63 0%, #331231 55%);
    --grad-button: linear-gradient(135deg,#ad0f54,#ec325f,#ff4d7d);
    --grad-card: linear-gradient(180deg,#731e58,#5c255a);
    --grad-rank-bar: linear-gradient(90deg, color-mix(in srgb, #ec325f 85%, transparent), color-mix(in srgb, #ec325f 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(236, 50, 95, 0.35);
}