/* Personal Shopper design tokens. Reference: nothing.tech.
   Colour has fixed meanings: red = deal, amber = warning. Nothing else uses them.
   Contrast (WCAG): ink 16.5, grey-1 6.7, red 4.9, amber tag 8.7 on light paper.
   grey-2 is 3.1:1, so it is for dots and borders only, never text. */

@font-face { font-family: "Doto"; src: url("fonts/doto-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Doto"; src: url("fonts/doto-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* colour */
  --paper: #F3F2EE;
  --ink: #141414;
  --grey-1: #55554F;   /* secondary text */
  --grey-2: #8A8A84;   /* empty dots, disabled borders. Not for text */
  --rule: #D6D5CF;     /* 1px rules */
  --red: #D2101E;      /* deal: prices, meter, savings */
  --amber: #F0B323;    /* warning tags only */
  --amber-ink: #2A1E00;
  --dot-grid: rgba(20, 20, 20, 0.09);

  /* type */
  --font-dot: "Doto", "IBM Plex Mono", monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;

  --t-label: 12px;     /* mono uppercase labels, buttons */
  --t-small: 14px;     /* mono metadata only */
  --t-body: 16px;      /* minimum for anything people read */
  --t-lead: 18px;
  --t-h2: 22px;
  --t-h1: 28px;
  --t-dot-s: 32px;     /* Doto never smaller than this */
  --t-dot-m: 48px;
  --t-dot-l: 72px;

  --track-label: 0.08em;
  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* space: 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* shape */
  --rule-w: 1px;
  --radius: 0;
  --tap: 44px;         /* minimum touch target */
  --measure: 68ch;
  --page: 1180px;

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F0F0F;
    --ink: #ECEBE6;
    --grey-1: #A3A29C;
    --grey-2: #73726D;
    --rule: #2C2C2A;
    --red: #FF4747;
    --amber: #E8AC1E;
    --amber-ink: #1E1500;
    --dot-grid: rgba(236, 235, 230, 0.08);
  }
}