/*
 * Design tokens. Three directions share one component layer:
 *   ember   - warm charcoal, ember orange, grotesque display
 *   cajovna - ink green, brass, soft serif display
 *   kour    - cool graphite, hot ember accent, wide display
 * Dark is the default; light exists for daylight use and printing.
 */
:root,
[data-direction="ember"] {
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --display-weight: 750;
    --display-tracking: -0.025em;
    --display-style: normal;

    --bg: #12100e;
    --bg-raised: #1b1815;
    --bg-sunken: #0c0a09;
    --surface: #221e1a;
    --surface-2: #2b2621;
    --line: #37302a;
    --line-strong: #4a4038;
    --text: #f3ece4;
    --text-2: #bfb3a6;
    --text-3: #8a7e72;

    --accent: #ff6b1a;
    --accent-2: #ffb03a;
    --accent-ink: #1a0b02;
    --accent-soft: rgb(255 107 26 / 0.14);
    --glow: rgb(255 98 18 / 0.55);

    --ok: #7fcf8b;
    --ok-soft: rgb(127 207 139 / 0.13);
    --warn: #f4c24f;
    --warn-soft: rgb(244 194 79 / 0.13);
    --danger: #ff5d5d;
    --danger-soft: rgb(255 93 93 / 0.13);
    --info: #7fb4ff;

    --coal-top: #3b3530;
    --coal-left: #2a2521;
    --coal-right: #1f1b18;
    --ember-1: #ffd27a;
    --ember-2: #ff8a2a;
    --ember-3: #e2401a;
    --ember-4: #8e1c08;

    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 6px 18px rgb(0 0 0 / 0.35);
    --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 18px 50px rgb(0 0 0 / 0.55);
    --grain-opacity: 0.06;
}

[data-direction="cajovna"] {
    --font-display: "Fraunces", ui-serif, Georgia, serif;
    --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --display-weight: 560;
    --display-tracking: -0.015em;
    --display-style: normal;

    --bg: #0c1513;
    --bg-raised: #12201c;
    --bg-sunken: #08100e;
    --surface: #172823;
    --surface-2: #1e332d;
    --line: #26413a;
    --line-strong: #355a50;
    --text: #efe9dc;
    --text-2: #b8bfae;
    --text-3: #7f8d82;

    --accent: #e0a64b;
    --accent-2: #f5d48a;
    --accent-ink: #1c1203;
    --accent-soft: rgb(224 166 75 / 0.14);
    --glow: rgb(240 150 50 / 0.5);

    --coal-top: #2e3a36;
    --coal-left: #222c29;
    --coal-right: #19211f;

    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 18px;
    --grain-opacity: 0.05;
}

[data-direction="kour"],
[data-direction="kourb"] {
    --font-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --display-weight: 650;
    --display-tracking: -0.02em;
    --display-style: normal;

    --bg: #0e0f12;
    --bg-raised: #15171b;
    --bg-sunken: #090a0c;
    --surface: #1b1e23;
    --surface-2: #23272d;
    --line: #2d3138;
    --line-strong: #3d434c;
    --text: #eef0f3;
    --text-2: #a9b0ba;
    --text-3: #737b86;

    --accent: #ff4d2e;
    --accent-2: #ff9a3c;
    --accent-ink: #160502;
    --accent-soft: rgb(255 77 46 / 0.15);
    --glow: rgb(255 70 30 / 0.55);

    --coal-top: #34373d;
    --coal-left: #26292e;
    --coal-right: #1c1e22;

    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --grain-opacity: 0.08;
}

/* kour colours with the ember type pairing */
[data-direction="kourb"] {
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --display-weight: 750;
    --display-tracking: -0.025em;
}

/* Daylight variant: only colours change, the direction keeps its type and shape. */
[data-theme="light"] {
    --bg: #f6f1ea;
    --bg-raised: #fffaf4;
    --bg-sunken: #ece4d9;
    --surface: #fffdf9;
    --surface-2: #f3ebe0;
    --line: #e2d6c7;
    --line-strong: #cbbba7;
    --text: #1d1813;
    --text-2: #5b5046;
    --text-3: #8b7f73;
    --accent-soft: rgb(255 107 26 / 0.12);
    --coal-top: #5a514a;
    --coal-left: #433c36;
    --coal-right: #342f2a;
    --shadow-1: 0 1px 2px rgb(60 40 20 / 0.08), 0 6px 18px rgb(60 40 20 / 0.08);
    --shadow-2: 0 2px 6px rgb(60 40 20 / 0.1), 0 18px 50px rgb(60 40 20 / 0.14);
    --grain-opacity: 0.03;
}

[data-direction="cajovna"][data-theme="light"] {
    --bg: #f2efe6;
    --bg-raised: #faf8f2;
    --surface: #fdfcf8;
    --surface-2: #ebe7da;
    --line: #d9d3c2;
    --text: #13201c;
    --text-2: #46554f;
}

[data-direction="kour"][data-theme="light"],
[data-direction="kourb"][data-theme="light"] {
    --bg: #f1f2f4;
    --bg-raised: #fafafb;
    --surface: #ffffff;
    --surface-2: #e9ebee;
    --line: #d8dbe0;
    --text: #121418;
    --text-2: #4a515b;
}


:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;

    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
    --step-0: clamp(0.97rem, 0.94rem + 0.15vw, 1.05rem);
    --step-1: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
    --step-2: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
    --step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
    --step-4: clamp(2.2rem, 1.8rem + 2vw, 3.6rem);
    --step-5: clamp(2.8rem, 2rem + 4vw, 5.5rem);

    --rank-1: #8a7e72;
    --rank-2: #ffc35a;
    --rank-3: #ff9a3c;
    --rank-4: #ff6a1a;
    --rank-5: #ff3d2e;
    --rank-6: #ffe9a8;

    --tap: 48px;
    --gutter: 16px;
    --content: 1120px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-1: 120ms;
    --dur-2: 220ms;
    --dur-3: 420ms;

    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}

@media (min-width: 720px) {
    :root {
        --gutter: 28px;
    }
}

/* Orange variants for the accent and the lit coal. base.html.twig defaults to Mandarinka. */
:root[data-accent] { --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent); }
:root[data-accent="zhava"] { --accent: #ff4d2e; --accent-2: #ff9a3c; --glow: rgb(255 70 30 / 0.55); --ember-1: #ffd27a; --ember-2: #ff8a2a; --ember-3: #e2401a; --ember-4: #8e1c08; }
:root[data-accent="mandarinka"] { --accent: #ff6a13; --accent-2: #ffb347; --glow: rgb(255 110 20 / 0.55); --ember-1: #ffe08a; --ember-2: #ff9a2e; --ember-3: #f05a14; --ember-4: #9a2a06; }
:root[data-accent="jantar"] { --accent: #ff8c1a; --accent-2: #ffc65c; --glow: rgb(255 150 30 / 0.5); --ember-1: #fff0b0; --ember-2: #ffb03a; --ember-3: #f07a12; --ember-4: #a3430a; }
:root[data-accent="lava"] { --accent: #f0361f; --accent-2: #ff7a3d; --glow: rgb(240 50 25 / 0.6); --ember-1: #ffc074; --ember-2: #ff6a2a; --ember-3: #d42a14; --ember-4: #6e1006; }
:root[data-accent="koral"] { --accent: #ff5a4f; --accent-2: #ffa07a; --glow: rgb(255 90 80 / 0.5); --ember-1: #ffd6a0; --ember-2: #ff8a6a; --ember-3: #e8483e; --ember-4: #8a1e1e; }
:root[data-accent="med"] { --accent: #e0773a; --accent-2: #f2b07a; --glow: rgb(224 119 58 / 0.45); --ember-1: #ffd9a6; --ember-2: #ef9a55; --ember-3: #c85e26; --ember-4: #6e2a10; }