/* ============================================================
   Portfolio_DS  ·  design tokens
   Single source of truth for colour, type and spacing.
   Mirrored in Figma: Portfolio_DS (file key iNvFgzMtBaHre9tmgHVaAv)

   This is the only file allowed to define a token. Every page links
   it (tools/build.py serves it at /assets/css/tokens.css), so there
   is one copy and nothing to drift. Everything else reads these with
   var(). Run `python3 tools/check.py` to verify.
   ============================================================ */

:root{
    --paper:#FAFAFA; --paper-2:#F2F1F7; --raise:#FFFFFF;
    --ink:#0A0A0F; --ink-2:#3D3B4A; --ink-3:#6B6878; --ink-4:#726F84;
    --line:#E3E0EC; --line-2:#EFEDF4;
    --violet:#5B37F0; --violet-ink:#4A2ED6; --violet-tint:#EDE9FF;
    --lime:#C6FF4F; --lime-ink:#4F6A00; --lime-tint:#F0FFD4;
    --on-violet:#FFFFFF; --on-lime:#0A0A0F;
    --btn:#0A0A0F; --on-btn:#FAFAFA; --focus:#5B37F0;
    --shadow:0 1px 2px rgba(10,10,15,.04), 0 8px 24px -16px rgba(10,10,15,.18);
    --grid-line:rgba(10,10,15,.055);
    --quote-bg:#0A0A0F; --quote-fg:#FAFAFA; --quote-mute:rgba(250,250,250,.55); --quote-border:transparent;
    --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
    --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --pad:clamp(20px,5vw,64px); --maxw:1200px;
    --photo-filter:none; --photo-grain:.18; --field-strength:.12; --field-grain:.2; --field-speed:.06;
    /* Grain over a flat surface rather than a photograph. The number runs higher
       than --photo-grain and reads quieter: `overlay` noise centred on mid grey
       barely moves a near white ground, where the same amount over a photograph
       lands on midtones and shows at once. Matched by eye, not by value.
       Held at the level where the surface reads as milled rather than speckled:
       the texture should be something you notice on a good screen up close, not a
       pattern competing with the marks sitting on it. */
    --surface-grain:.14;
    --logo-filter:grayscale(1);
    /* hover hands a logo its own colours back. On paper that is simply the file
       as drawn, so the filter comes off. */
    --logo-filter-hover:none;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0A0A0F; --paper-2:#121118; --raise:#15141C;
      --ink:#F5F4F8; --ink-2:#C6C3D2; --ink-3:#918DA1; --ink-4:#7C7890;
      --line:#262433; --line-2:#1C1B26;
      --violet:#8E6BFF; --violet-ink:#B7A3FF; --violet-tint:#1E1930;
      --lime:#C6FF4F; --lime-ink:#C6FF4F; --lime-tint:#1B2410;
      --on-violet:#0A0A0F; --on-lime:#0A0A0F;
      --btn:#C6FF4F; --on-btn:#0A0A0F; --focus:#C6FF4F;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
      --grid-line:rgba(245,244,248,.05);
      --quote-bg:#121118; --quote-fg:#F5F4F8; --quote-mute:#807C94; --quote-border:#262433;
      --photo-filter:brightness(.84) contrast(1.06); --photo-grain:.14; --field-strength:.12;
      --surface-grain:.18;
      --logo-filter:grayscale(1) invert(1);
      --logo-filter-hover:none;
    }
  }
  :root[data-theme="dark"]{
    --paper:#0A0A0F; --paper-2:#121118; --raise:#15141C;
    --ink:#F5F4F8; --ink-2:#C6C3D2; --ink-3:#918DA1; --ink-4:#7C7890;
    --line:#262433; --line-2:#1C1B26;
    --violet:#8E6BFF; --violet-ink:#B7A3FF; --violet-tint:#1E1930;
    --lime:#C6FF4F; --lime-ink:#C6FF4F; --lime-tint:#1B2410;
    --on-violet:#0A0A0F; --on-lime:#0A0A0F;
    --btn:#C6FF4F; --on-btn:#0A0A0F; --focus:#C6FF4F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
    --grid-line:rgba(245,244,248,.05);
    --quote-bg:#121118; --quote-fg:#F5F4F8; --quote-mute:#807C94; --quote-border:#262433;
    --photo-filter:brightness(.84) contrast(1.06); --photo-grain:.14; --field-strength:.12;
    --surface-grain:.18;
    --logo-filter:grayscale(1) invert(1);
    --logo-filter-hover:none;
  }