/* Borderless — ontwerptokens
 *
 * Alles wat kleur, ruimte, rondingen en beweging bepaalt staat hier, en nergens anders.
 * De drie ontwerpen verschillen uitsluitend in de waarden van deze tokens plus hun eigen
 * accentbestand; geen enkel ontwerp mag een losse kleurcode in een component zetten.
 *
 * De palet komt uit het logo: een diep marineblauwe nachthemel, een aardbol met blauwe
 * oceanen en groene continenten, en daaromheen verzadigde spraakballonnen in koraal,
 * turkoois, warm geel en oranje. De oude site was olijfgroen-zwart en had daar niets mee
 * te maken.
 */

:root {
  /* Merkkleuren, letterlijk uit het logo. Deze veranderen nooit per ontwerp — ze zijn de
     constante waaraan je Borderless herkent. */
  --brand-night: #070c1c;
  --brand-deep: #0b1330;
  --brand-ocean: #2f7fd0;
  --brand-ocean-bright: #4b9ce8;
  --brand-land: #4faa72;
  --brand-land-bright: #6cc78d;
  --brand-coral: #e8607f;
  --brand-teal: #2fbfae;
  --brand-sun: #f0c04e;
  --brand-amber: #ee8b47;
  --brand-paper: #f3f6fc;

  /* De drie treden van een stempel. Staan hier bij de merkkleuren en niet per ontwerp, omdat
     brons, zilver en goud overal hetzelfde moeten betekenen: een stempel is een prijs, en de
     waarde van een prijs mag niet van je thema afhangen. Elke trede heeft een lijnkleur en
     een gloed; de gloed is wat een gouden stempel van een gouden lijntje onderscheidt. */
  --tier-bronze: #c98b5e;
  --tier-bronze-glow: rgba(201, 139, 94, .22);
  --tier-silver: #b9c3d6;
  --tier-silver-glow: rgba(185, 195, 214, .2);
  --tier-gold: #f0c04e;
  --tier-gold-glow: rgba(240, 192, 78, .26);
  /* Goud als tékst. Het messing van de Duty Free (mijlen, prijzen, afdelingsnummers) is op een
     donker vlak gewoon --tier-gold, maar op papier is dat geel onleesbaar. Dit token is de
     inktversie: de papieren ontwerpen zetten er een donker goud in, de donkere ontwerpen wijzen
     terug naar --tier-gold. De stempels en ander tekenwerk blijven altijd --tier-gold zelf —
     een stempel is een prijs, en die verandert niet van kleur met je thema. */
  --tier-gold-ink: var(--tier-gold);

  /* Ritme. Eén schaal voor de hele applicatie, zodat afstanden zich tot elkaar verhouden
     in plaats van per scherm opnieuw bedacht te zijn. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 38px;
  --space-7: 56px;
  --space-8: 80px;

  --radius-xs: 6px;
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Beweging. Eén set curves; "expensive" zit in de traagheid van het uitlopen, niet in
     de grootte van de verplaatsing. */
  --ease-out: cubic-bezier(.16, .84, .34, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.3);
  --dur-1: .16s;
  --dur-2: .28s;
  --dur-3: .46s;
  --dur-4: .72s;

  --font-ui: "Inter var", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  /* Typografische fijnafstelling per ontwerp. */
  --display-tracking: -.035em;
  --display-weight: 640;
  --body-leading: 1.65;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Ontwerp 1 — Journey
 * Reizen bij laag licht. Diepe indigo lucht, warm zand, koraal als richtingaanwijzer.
 * Warm, uitnodigend, ruim. De sfeer van onderweg zijn, niet van een dashboard.
 * ───────────────────────────────────────────────────────────────────────────── */
:root[data-design="journey"] {
  /* Expliciet, hoewel het al de standaard is: het papieren ontwerp hieronder zet zijn waarden
     óók op de kale :root, en zonder deze regel zou zijn donkere goud-inkt hier doorsijpelen.
     Hetzelfde geldt voor color-scheme: dit ontwerp is donker, dus de systeemonderdelen ook. */
  --tier-gold-ink: var(--tier-gold);
  color-scheme: dark;

  --bg: #0d1226;
  --bg-deep: #080c1c;
  --bg-far: #141c3c;
  --sidebar: #0a0f22;
  --surface: #151c36;
  --surface-soft: #111730;
  --elev: #1b2444;
  --elev-strong: #232e52;
  --field: #0a0f24;
  --track: #1a2242;

  --line: #2a3560;
  --line-soft: #1d2647;
  --line-strong: #3b4878;

  --text: #f0f2fa;
  --muted: #a7b0cc;
  --muted-2: #6f7898;

  --accent: #f0a765;
  --accent-strong: #f7bd85;
  --accent-quiet: rgba(240, 167, 101, .13);
  --on-accent: #2a1608;

  --good: #5cc48f;
  --bad: #ef7d90;
  --warning: #f0c04e;
  --good-soft: rgba(92, 196, 143, .11);
  --bad-soft: rgba(239, 125, 144, .11);
  --warning-soft: rgba(240, 192, 78, .11);
  --good-line: rgba(92, 196, 143, .42);
  --bad-line: rgba(239, 125, 144, .45);
  --warning-line: rgba(240, 192, 78, .42);

  --shadow-1: 0 2px 10px rgba(4, 7, 20, .4);
  --shadow-2: 0 18px 44px rgba(4, 7, 20, .5);
  --shadow-3: 0 34px 90px rgba(3, 5, 16, .62);

  --radius-card: var(--radius-l);
  --radius-control: var(--radius-s);
  --display-tracking: -.032em;
  --display-weight: 620;

  /* De wereldkaart. Iedere ontwerprichting geeft hem een eigen atmosfeer. */
  --world-sky-top: #16204a;
  --world-sky-bottom: #3a2b4e;
  --world-horizon: #f0a765;
  --world-far: #1b2547;
  --world-mid: #223058;
  --world-near: #2b3a68;
  --world-route: #f0a765;
  --world-route-done: #f7bd85;
  --world-ink: #f0f2fa;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Ontwerp 2 — Premium (papier)
 * Sinds 8 september 2026 hetzelfde palet als de welkomspagina: beige papier,
 * bijna-zwarte inkt, terracotta als enige accent. De app en de verkooppagina
 * zijn daarmee één product; de waarden hieronder zijn dezelfde als --papier,
 * --inkt, --lijn en --warm in welkom.css en auth.css. Verander je hier iets,
 * verander het daar dan ook — die bladen lezen bewust geen tokens.css.
 *
 * De vormentaal blijft die van Premium: typografie en witruimte doen het werk,
 * niets versiert. Alleen de kleuren zijn omgeklapt van nacht naar papier.
 *
 * Dit blok staat óók op de kale :root, en dat is de eerste verf: het inline
 * stijlblad van index.html zet olijfdonkere terugvalwaarden op :root, en
 * data-design wordt pas gezet als de module draait. Zonder dit blok op :root
 * flitst elke start dus even donker. Dit blad laadt ná dat inline blad, dus
 * bij gelijke specificiteit wint het; journey en living winnen daarna weer
 * van :root omdat hun selector zwaarder is.
 * ───────────────────────────────────────────────────────────────────────────── */
:root, :root[data-design="premium"] {
  /* De systeemonderdelen mee laten kleuren. Niet cosmetisch: de uitklaplijst van een `select`
     en het paneel van een datumveld worden door de browser zelf getekend, en zonder deze regel
     komen die op een donker systeem zwart open midden op een papieren vragenlijst — juist het
     scherm waar ze allebei op staan (zie de kennismaking in index.html). */
  color-scheme: light;

  --bg: #f4eee2;
  --bg-deep: #eae2d3;
  --bg-far: #fbf7ec;
  --sidebar: #efe8da;
  --surface: #fdfbf6;
  --surface-soft: #faf5ea;
  --elev: #ece4d3;
  --elev-strong: #e2d8c2;
  --field: #fdfbf6;
  --track: #e0d6c1;

  --line: #ded4c2;
  --line-soft: #e7dfcf;
  --line-strong: #c9bda7;

  --text: #1f1811;
  --muted: #5b5044;
  --muted-2: #766a58;

  /* Op papier is de hover-trap andersom dan in het donker: het accent wordt
     bij aanraking dieper in plaats van lichter, zoals op de welkomspagina
     (--warm naar --warm-2). */
  --accent: #a8512b;
  --accent-strong: #8e4322;
  --accent-quiet: rgba(168, 81, 43, .1);
  --on-accent: #fdfbf6;

  /* Goed en waarschuwing volgen de inlogpoort (auth.css). Fout wijkt bewust af
     van --a-fout daar: dat roestrood ligt te dicht bij het terracotta accent,
     en in de les staan "gekozen" en "fout" naast elkaar op hetzelfde scherm.
     Een dieper karmozijn blijft warm papier, maar is nooit met het accent te
     verwarren. */
  /* Messing als inkt: leesbaar donker goud voor mijlen en prijzen — zie het token hierboven. */
  --tier-gold-ink: #8a5a12;

  --good: #3f6f4a;
  --bad: #a02e3c;
  --warning: #8a5a12;
  --good-soft: rgba(63, 111, 74, .1);
  --bad-soft: rgba(160, 46, 60, .09);
  --warning-soft: rgba(138, 90, 18, .09);
  --good-line: rgba(63, 111, 74, .42);
  --bad-line: rgba(160, 46, 60, .42);
  --warning-line: rgba(138, 90, 18, .4);

  /* De kaartschaduw van de welkomspagina, in drie zwaartes: warme inkt in
     plaats van zwart, en vooral zacht — op papier draagt de rand de kaart,
     niet de schaduw. */
  --shadow-1: 0 1px 2px rgba(31, 24, 17, .05);
  --shadow-2: 0 1px 2px rgba(31, 24, 17, .05), 0 12px 32px -24px rgba(31, 24, 17, .4);
  --shadow-3: 0 2px 5px rgba(31, 24, 17, .06), 0 28px 66px -30px rgba(31, 24, 17, .5);

  /* De sluier achter een venster: warme inkt, licht genoeg dat het papier
     eronder herkenbaar blijft. Overschrijft de donkere :root-waarde uit
     base.css zodra data-design gezet is. */
  --overlay: rgba(31, 24, 17, .45);

  /* Dezelfde maten als de welkomspagina: kaarten 10px, knoppen 6px. */
  --radius-card: var(--radius-s);
  --radius-control: var(--radius-xs);
  --display-tracking: -.045em;
  --display-weight: 600;

  /* Alleen nog gelezen door dode selectors uit de oude kaart (world-route-base
     e.d. komen in geen enkele opmaakgenerator meer voor); de echte wereld
     kleurt via --wp-* uit worlds.js en daylight.js. Meegekleurd zodat er geen
     nachtwaarden in een papieren ontwerp blijven hangen. */
  --world-sky-top: #f4eee2;
  --world-sky-bottom: #eae2d3;
  --world-horizon: #a8512b;
  --world-far: #e7dfcf;
  --world-mid: #ded4c2;
  --world-near: #d3c7ae;
  --world-route: #a8512b;
  --world-route-done: #8e4322;
  --world-ink: #1f1811;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Ontwerp 3 — Living World
 * De kleur van het logo zelf: oceaanblauw en landgroen op een nachthemel.
 * De wereld verandert mee met je voortgang — zie --world-progress in world.js.
 * ───────────────────────────────────────────────────────────────────────────── */
:root[data-design="living"] {
  /* Zelfde reden als bij journey: de papieren :root-waarden niet laten doorsijpelen. */
  --tier-gold-ink: var(--tier-gold);
  color-scheme: dark;

  --bg: #061021;
  --bg-deep: #030a17;
  --bg-far: #0a1a33;
  --sidebar: #040d1c;
  --surface: #0c1a30;
  --surface-soft: #09162a;
  --elev: #12253f;
  --elev-strong: #1a3252;
  --field: #05101f;
  --track: #102138;

  --line: #1d3a5c;
  --line-soft: #142a45;
  --line-strong: #2b5079;

  --text: #eef4fb;
  --muted: #9db3cc;
  --muted-2: #647c98;

  --accent: #2fbfae;
  --accent-strong: #58d8c8;
  --accent-quiet: rgba(47, 191, 174, .13);
  --on-accent: #01201c;

  --good: #4faa72;
  --bad: #e8607f;
  --warning: #f0c04e;
  --good-soft: rgba(79, 170, 114, .12);
  --bad-soft: rgba(232, 96, 127, .11);
  --warning-soft: rgba(240, 192, 78, .11);
  --good-line: rgba(79, 170, 114, .45);
  --bad-line: rgba(232, 96, 127, .45);
  --warning-line: rgba(240, 192, 78, .42);

  --shadow-1: 0 2px 12px rgba(1, 6, 16, .45);
  --shadow-2: 0 16px 46px rgba(1, 6, 16, .55);
  --shadow-3: 0 32px 88px rgba(1, 5, 14, .68);

  --radius-card: var(--radius-l);
  --radius-control: var(--radius-s);
  --display-tracking: -.03em;
  --display-weight: 630;

  --world-sky-top: #061021;
  --world-sky-bottom: #0d2b45;
  --world-horizon: #2fbfae;
  --world-far: #0a1c33;
  --world-mid: #0f2740;
  --world-near: #14324f;
  --world-route: #2fbfae;
  --world-route-done: #58d8c8;
  --world-ink: #eef4fb;
}