/* Design tokens. Palette sampled from Daan's style guide (pastel pixel UI kit). */
:root {
  /* palette */
  --ink: #292A33;      /* outlines, text */
  --paper: #FFFFFF;    /* windows */
  --shade: #F1F1F3;    /* window shading, disabled */
  --wall: #F7F7FB;     /* desktop wallpaper */
  --wall-dot: #E3E3F6; /* wallpaper dot grid */
  --lav: #BDBEF2;      /* title bars, YES/NO, loading segments */
  --lav-l: #E2E2FA;
  --lav-d: #9F9EB3;    /* inactive, pressed (disabled things only: 2.6:1 on white) */
  --ink-soft: #5E5D72; /* quieter text that still has to be read: hints, labels (6.4:1 on white) */
  --pink: #F8A6D4;     /* OK, DAAN, hearts, asterisk */
  --pink-l: #FCE1F0;
  --pink-d: #E37DB9;
  --mint: #C8F6C8;     /* send button, chat bubbles */
  --mint-d: #8ED89C;
  --yellow: #FDDF80;   /* stars, highlights */
  --red: #F2687E;      /* crash, Mars, angry face */
  --grey: #9898B0;

  /* pixel grid: 1 art pixel */
  --px: 3px;
  --bw: 3px;                 /* border width */
  --sh: 4px;                 /* hard shadow offset */
  --shadow: var(--sh) var(--sh) 0 0 var(--ink);

  /* type */
  --font-ui: 'Silkscreen', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-body: 'Pixelify Sans', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-scale: 1;
  --fs-xs: calc(13px * var(--text-scale));
  --fs-s: calc(16px * var(--text-scale));
  --fs-m: calc(18px * var(--text-scale));
  --fs-l: calc(24px * var(--text-scale));
  --fs-xl: calc(32px * var(--text-scale));
  --lh: 1.35;

  /* layout */
  --win-max: 440px;
  --gutter: 12px;
  --tap: 44px;
  --taskbar-h: 44px;
  --nav-h: 72px;

  /* layers */
  --z-stage: 1;
  --z-henk: 30;
  --z-nav: 35;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-top: 70;
  --z-dev: 90;

  /* motion (divided by --speed, which ?speed=N sets for tests) */
  --speed: 1;
  --t-step: calc(83ms / var(--speed));   /* one 12 fps frame */
  --t-fast: calc(150ms / var(--speed));
  --t-med: calc(300ms / var(--speed));
  --t-slow: calc(600ms / var(--speed));
}

@media (min-width: 768px) {
  :root {
    --px: 4px;
    --gutter: 24px;
  }
}

/* LEESBRIL 30+: bigger text only (tiles and tap areas keep their size). */
html.leesbril {
  --text-scale: 1.25;
}