/*
 * LET OP: gegenereerd bestand, niet met de hand aanpassen.
 *
 * Bron: site/src/styles/tokens.css in de pcon-umbrella
 * Bijwerken: php tools/sync-tokens.php (vanuit de umbrella)
 */
/*
  De gedeelde grondslag van pconnect: het lettertype en alle kleur-, lijn-, radius- en
  schaduwtokens.

  Dit bestand heeft twee afnemers: de marketingsite in deze map, en het klantportaal in
  pconnect-admin (`public/css/portal/tokens.css`). Die twee zitten in verschillende
  repo's, dus een echte import over die grens kan niet; kopieren gaat met
  `php tools/sync-tokens.php` vanuit de umbrella. Bron is dit bestand, altijd.

  Waarom de waarden als paar staan en niet als twee volledige themablokken: zo staat elke
  kleur hier precies een keer. In global.css stonden de donkere waarden twee keer, een
  keer achter de mediaquery en een keer achter [data-theme='dark'], en dat loopt uit
  elkaar zodra je er een vergeet.

  Wanneer donker aan staat beslist dit bestand bewust niet, want dat verschilt per plek:

  - de site heeft geen JavaScript en volgt het systeem, met een mediaquery in global.css;
  - het portaal volgt de keuze van de gebruiker, die Filament als `class="dark"` op
    `<html>` zet. Ook bij de keuze "systeem", want dat rekent Filament zelf uit.

  Een mediaquery hier zou in het portaal donkere kleuren aanzetten terwijl de gebruiker
  net licht heeft gekozen.
*/

/* ---------- lettertype, zelf gehost ---------- */

/*
  Het pad is bewust vanaf de wortel: `/fonts/...` wijst in de site naar `public/fonts`
  en in het portaal naar `pconnect-admin/public/fonts`, waar de sync dezelfde twee
  bestanden neerzet. Daardoor werkt dit bestand op beide plekken ongewijzigd.
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- gelijk in beide themas ---------- */

:root {
  /*
    De markeerkleur: pCon-groen. Voor vlakken, stippen, gloed en het vinkje, en in beide
    themas dezelfde. Voor tekst is het te licht; daarvoor is --hi-ink, en die verschilt
    wel per thema.
  */
  --hi: #9bd13a;

  /* De kleurwas achter de voettekst. Alleen de dekking verschilt per thema. */
  --wash-1: #9bd13a;
  --wash-2: #3b82f6;
  --wash-3: #0b1e3c;
  --grain-opacity: 0;

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  --shell: 1140px;
  --shell-wide: 1280px;
  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --section: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- licht en donker, als paar ---------- */

:root {
  /* Ondergronden: paginagrond, verzonken sectie, kaart, en de tint binnen een kaart. */
  --canvas-light: #f6f8fb;
  --canvas-dark: #0a1222;
  --sunk-light: #eef2f7;
  --sunk-dark: #070d1a;
  --surface-light: #ffffff;
  --surface-dark: #111b30;
  --surface-2-light: #fbfcfd;
  --surface-2-dark: #15213a;

  /* Tekst. --ink is tegelijk de huiskleur: marineblauw. */
  --ink-light: #0b1e3c;
  --ink-dark: #f1f5fa;
  --ink-soft-light: #4b5a72;
  --ink-soft-dark: #a9b4c6;
  --ink-faint-light: #76829a;
  --ink-faint-dark: #7b879c;

  /* Randen en haarlijnen: altijd de inkt met een lage dekking, niet een grijstint. */
  --line-light: rgba(11, 30, 60, 0.1);
  --line-dark: rgba(255, 255, 255, 0.11);
  --line-soft-light: rgba(11, 30, 60, 0.06);
  --line-soft-dark: rgba(255, 255, 255, 0.06);
  --line-strong-light: rgba(11, 30, 60, 0.18);
  --line-strong-dark: rgba(255, 255, 255, 0.18);

  /* Marineblauw: de primaire knop, de focusring, het donkere blok. */
  --accent-light: #0b1e3c;
  --accent-dark: #f1f5fa;
  --accent-ink-light: #ffffff;
  --accent-ink-dark: #0b1e3c;
  --accent-soft-light: rgba(11, 30, 60, 0.06);
  --accent-soft-dark: rgba(241, 245, 250, 0.08);
  --accent-line-light: rgba(11, 30, 60, 0.18);
  --accent-line-dark: rgba(241, 245, 250, 0.22);

  /* Groen als tekstkleur, en de zachte varianten eromheen. */
  --hi-ink-light: #4f8a00;
  --hi-ink-dark: #b4e35a;
  --hi-soft-light: rgba(155, 209, 58, 0.16);
  --hi-soft-dark: rgba(155, 209, 58, 0.14);
  --hi-line-light: rgba(155, 209, 58, 0.5);
  --hi-line-dark: rgba(155, 209, 58, 0.4);

  /*
    De tweede markeerkleur is niet decoratief: groen is e-commerce, blauw is ERP. Zie
    .is-erp in global.css, dat de markeertokens in een keer omzet.
  */
  --hi-2-light: #3b82f6;
  --hi-2-dark: #60a5fa;
  --hi-2-ink-light: #1d4ed8;
  --hi-2-ink-dark: #93c5fd;
  --hi-2-soft-light: rgba(59, 130, 246, 0.12);
  --hi-2-soft-dark: rgba(96, 165, 250, 0.14);
  --hi-2-line-light: rgba(59, 130, 246, 0.4);
  --hi-2-line-dark: rgba(96, 165, 250, 0.4);

  --accent-2-light: #1d4ed8;
  --accent-2-dark: #60a5fa;
  --accent-2-ink-light: #ffffff;
  --accent-2-ink-dark: #0b1e3c;
  --accent-2-soft-light: rgba(29, 78, 216, 0.08);
  --accent-2-soft-dark: rgba(96, 165, 250, 0.12);
  --accent-2-line-light: rgba(29, 78, 216, 0.24);
  --accent-2-line-dark: rgba(96, 165, 250, 0.28);

  /* Het vinkje: hetzelfde groen, want "in orde" en pCon-groen vallen hier samen. */
  --sage-light: #4f8a00;
  --sage-dark: #b4e35a;
  --sage-soft-light: rgba(155, 209, 58, 0.18);
  --sage-soft-dark: rgba(155, 209, 58, 0.14);
  --sage-line-light: rgba(155, 209, 58, 0.55);
  --sage-line-dark: rgba(155, 209, 58, 0.35);

  --wash-opacity-light: 0.5;
  --wash-opacity-dark: 0.26;

  --sh-1-light: 0 1px 2px rgba(11, 30, 60, 0.04), 0 6px 16px -10px rgba(11, 30, 60, 0.1);
  --sh-1-dark: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -10px rgba(0, 0, 0, 0.5);
  --sh-2-light: 0 2px 4px rgba(11, 30, 60, 0.05), 0 24px 48px -20px rgba(11, 30, 60, 0.18);
  --sh-2-dark: 0 2px 4px rgba(0, 0, 0, 0.35), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  --sh-3-light: 0 4px 10px rgba(11, 30, 60, 0.06), 0 48px 100px -36px rgba(11, 30, 60, 0.3);
  --sh-3-dark: 0 4px 10px rgba(0, 0, 0, 0.4), 0 48px 100px -36px rgba(0, 0, 0, 0.7);
  --sh-glow-light: 0 10px 28px -12px rgba(11, 30, 60, 0.45);
  --sh-glow-dark: 0 10px 28px -10px rgba(0, 0, 0, 0.5);

  /* De lichtrand bovenop een glasvlak. In het donker veel zwakker. */
  --glass-shine-light: rgba(255, 255, 255, 0.65);
  --glass-shine-dark: rgba(255, 255, 255, 0.07);
}

/* ---------- licht is de basis ---------- */

:root {
  color-scheme: light;

  --canvas: var(--canvas-light);
  --sunk: var(--sunk-light);
  --surface: var(--surface-light);
  --surface-2: var(--surface-2-light);

  --ink: var(--ink-light);
  --ink-soft: var(--ink-soft-light);
  --ink-faint: var(--ink-faint-light);

  --line: var(--line-light);
  --line-soft: var(--line-soft-light);
  --line-strong: var(--line-strong-light);

  --accent: var(--accent-light);
  --accent-ink: var(--accent-ink-light);
  --accent-soft: var(--accent-soft-light);
  --accent-line: var(--accent-line-light);

  --hi-ink: var(--hi-ink-light);
  --hi-soft: var(--hi-soft-light);
  --hi-line: var(--hi-line-light);

  --hi-2: var(--hi-2-light);
  --hi-2-ink: var(--hi-2-ink-light);
  --hi-2-soft: var(--hi-2-soft-light);
  --hi-2-line: var(--hi-2-line-light);

  --accent-2: var(--accent-2-light);
  --accent-2-ink: var(--accent-2-ink-light);
  --accent-2-soft: var(--accent-2-soft-light);
  --accent-2-line: var(--accent-2-line-light);

  --sage: var(--sage-light);
  --sage-soft: var(--sage-soft-light);
  --sage-line: var(--sage-line-light);

  --wash-opacity: var(--wash-opacity-light);

  --sh-1: var(--sh-1-light);
  --sh-2: var(--sh-2-light);
  --sh-3: var(--sh-3-light);
  --sh-glow: var(--sh-glow-light);

  --glass-shine: var(--glass-shine-light);
}

/* ---------- donker, als het gekozen is ---------- */

/*
  Twee selectors voor twee afnemers: `data-theme` zet de site, `.dark` zet Filament in
  het portaal. Beide zijn specifieker dan het blok hierboven, dus de volgorde doet hier
  niets.
*/
:root[data-theme='dark'],
:root.dark {
  color-scheme: dark;

  --canvas: var(--canvas-dark);
  --sunk: var(--sunk-dark);
  --surface: var(--surface-dark);
  --surface-2: var(--surface-2-dark);

  --ink: var(--ink-dark);
  --ink-soft: var(--ink-soft-dark);
  --ink-faint: var(--ink-faint-dark);

  --line: var(--line-dark);
  --line-soft: var(--line-soft-dark);
  --line-strong: var(--line-strong-dark);

  --accent: var(--accent-dark);
  --accent-ink: var(--accent-ink-dark);
  --accent-soft: var(--accent-soft-dark);
  --accent-line: var(--accent-line-dark);

  --hi-ink: var(--hi-ink-dark);
  --hi-soft: var(--hi-soft-dark);
  --hi-line: var(--hi-line-dark);

  --hi-2: var(--hi-2-dark);
  --hi-2-ink: var(--hi-2-ink-dark);
  --hi-2-soft: var(--hi-2-soft-dark);
  --hi-2-line: var(--hi-2-line-dark);

  --accent-2: var(--accent-2-dark);
  --accent-2-ink: var(--accent-2-ink-dark);
  --accent-2-soft: var(--accent-2-soft-dark);
  --accent-2-line: var(--accent-2-line-dark);

  --sage: var(--sage-dark);
  --sage-soft: var(--sage-soft-dark);
  --sage-line: var(--sage-line-dark);

  --wash-opacity: var(--wash-opacity-dark);

  --sh-1: var(--sh-1-dark);
  --sh-2: var(--sh-2-dark);
  --sh-3: var(--sh-3-dark);
  --sh-glow: var(--sh-glow-dark);

  --glass-shine: var(--glass-shine-dark);
}