/* Doel Systems — design tokens, light theme (every colour and font in styles.css references these by name).
   Palette follows the doelPay brand (pink → deep blue) from the Pomelli draft. Colours are OKLCH; hex beside each.
   The previous dark theme lives in tokens-dark.css. */
:root {
  /* Surfaces */
  --bg: oklch(97.9% 0.006 264.5);  /* #F6F8FC */
  --surface: oklch(100% 0 0);  /* #FFFFFF */
  --surface-2: oklch(96.0% 0.012 264.5);  /* #EEF2FA */
  --surface-3: oklch(93.3% 0.019 266.0);  /* #E3E9F6 */
  --line: oklch(92.1% 0.018 264.5);  /* #DFE5F1 */
  --line-strong: oklch(85.6% 0.030 264.4);  /* #C6D0E4 */

  /* Ink */
  --ink: oklch(18.2% 0.046 271.6);  /* #0B1026 */
  --text: oklch(32.7% 0.053 270.1);  /* #2A3350 */
  --muted: oklch(51.2% 0.048 268.5);  /* #5B6683 */
  --subtle: oklch(62.1% 0.041 268.6);  /* #7C86A0 */

  /* Brand */
  --blue: oklch(49.3% 0.248 263.2);  /* #0349EA */
  --blue-hover: oklch(42.8% 0.215 263.2);  /* #023BC2 */
  --blue-soft: oklch(94.9% 0.023 266.9);  /* #E7EEFE */
  --sky: oklch(58.4% 0.140 247.5);  /* #2380C9 */
  --pink: oklch(66.7% 0.283 344.9);  /* #FF01BB — icons and fills only, not text */
  --pink-ink: oklch(51.9% 0.218 347.5);  /* #B8007F — pink that passes AA as text */
  --pink-soft: oklch(95.4% 0.032 338.6);  /* #FFE8F7 */

  /* Footer band */
  --night: oklch(18.2% 0.046 271.6);  /* #0B1026 */
  --night-2: oklch(22.9% 0.055 272.3);  /* #141A36 */
  --night-text: oklch(77.8% 0.037 271.5);  /* #AEB6CF */
  --white: oklch(100% 0 0);  /* #FFFFFF */

  /* Sector markers */
  --pay: oklch(58.7% 0.212 287.6);  /* #7B5CF0 */
  --transit: oklch(63.2% 0.110 183.1);  /* #0F9F90 */
  --plant: oklch(69.9% 0.149 68.7);  /* #D98A12 */
  --care: oklch(61.8% 0.194 10.3);  /* #E0436A */

  /* Derived (all from named tokens) */
  --grad-brand: linear-gradient(135deg, var(--pink) 0%, var(--blue) 100%);
  --grad-soft: linear-gradient(135deg, var(--pink-soft) 0%, var(--blue-soft) 100%);
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent), 0 4px 14px color-mix(in oklch, var(--ink) 5%, transparent);
  --shadow-md: 0 2px 4px color-mix(in oklch, var(--ink) 5%, transparent), 0 18px 40px color-mix(in oklch, var(--ink) 10%, transparent);
  --night-line: color-mix(in oklch, var(--white) 10%, transparent);
  --mask: oklch(0% 0 0);   /* opaque mask stop, not a visible colour */

  /* Type — 2 + 1: Archivo display, Geist body, JetBrains Mono for figures */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Shape + motion */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 200ms;
  --t-normal: 300ms;
}