/* ============================================================
   Graphite · TOKENS
   The hdw master kit for every new app and site. Grey, white and
   black, set in SF Pro, the look of brand.hellodigitworks.com and
   [Menu]al. Every value in the kit comes from this file. A value
   that is not here does not go in a screen.

   Light by default, dark follows the phone. [data-theme] on the
   root wins in both directions, so a toggle can force either.

   Load order: tokens → base → layout → components → app → responsive
   ============================================================ */

/* SF Pro comes from Apple devices themselves, so there is no file and no
   licence. Inter Tight stands in on Windows and Android, and only downloads
   there. */
@font-face{
  font-family:'Inter Tight';
  src:url('../fonts/InterTight-Variable-latin.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
}

:root{
  color-scheme:light;

  /* ==========================================================
     1 · COLOUR. Monochrome. No hue anywhere in the interface,
     except the three below, each with one job.
     ========================================================== */
  --canvas:#f4f4f4;      /* the page */
  --panel:#f9f9f9;       /* a side panel, a bar of actions, a sidebar */
  --card:#ebebeb;        /* a card or tile on the page, a row under the pointer */
  --card-2:#e2e2e2;      /* a pill track, a pressed control, a grey button */
  --raise:#ffffff;       /* a field, a selected pill, a dialog, a list that drops */
  --ink:#111111;         /* what you read */
  --ink-2:#525252;       /* what explains it */
  --ink-3:#686868;       /* dates, counts, labels. 4.6:1 on a card */
  --line:#e0e0e0;        /* hairline */
  --line-2:#c9c9c9;      /* stronger hairline, an outline */
  --hero:#0b0b0b;        /* the black banner */
  --hero-ink:#ffffff;
  --focus:#111111;
  --scrim:rgba(0,0,0,.32);

  /* Meaning, never decoration. */
  --yes:#1d9c3f;         /* saved, done, passed. Dots and ticks only */
  --no:#d92d20;          /* failed, error, delete */
  /* hdw orange. Rare: the hdw mark, or one moment a whole product is built
     around. Never a button by default, never two on one screen. */
  --accent:#ff2e00;

  --shadow-pill:0 1px 2px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.06);
  --shadow-pop:0 24px 64px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.10); /* paper on a stage */

  /* ==========================================================
     2 · TYPE. SF Pro. Size first, weight second, colour third.
     ========================================================== */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter Tight',system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter Tight',system-ui,sans-serif;

  --fs-hero:clamp(56px, 9.2vw, 152px);   /* the banner title, one or two words */
  --fs-lead:clamp(22px, 2.1vw, 30px);    /* an opening paragraph */
  --fs-big:clamp(30px, 3.6vw, 52px);     /* a statement, a sentence-long headline */
  --fs-sec:clamp(28px, 2.6vw, 40px);     /* a section's name */
  --fs-row:22px;                         /* a name on a tile or a card */
  --fs-intro:17px;                       /* the line under a name, a dialog title */
  --fs-body:15px;                        /* what you read, what you type */
  --fs-small:13px;                       /* buttons, pills, rows in a panel */
  --fs-label:12px;                       /* labels, counts, tooltips */
  --fs-tag:11px;                         /* a tag inside a row */

  --w-reg:400;           /* everything you read */
  --w-med:500;           /* titles, button words, the selected thing */
  --w-semi:590;          /* a brand's name in a bar. Nowhere else */

  --lh-hero:.92;
  --lh-tight:1.08;
  --lh:1.42;
  --lh-prose:1.5;

  --track-hero:-0.045em;
  --track-big:-0.03em;
  --track-row:-0.02em;
  --track-body:-0.01em;

  --measure:60ch;

  /* ==========================================================
     3 · SPACE. The 4px grid. These eleven, nothing between.
     ========================================================== */
  --s-0:2px;  --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; --s-10:128px;

  --pad-x:clamp(20px, 4.4vw, 64px);  /* the inset text keeps from the page edge */
  --hair:2px;                         /* the gap between tiles that run edge to edge */
  --tile-pad:clamp(16px, 1.8vw, 28px);/* text inside an edge-to-edge tile */

  /* ==========================================================
     4 · SHAPE
     ========================================================== */
  --r-sm:6px;        /* a row, a chip, a small box, a menu item */
  --r:10px;          /* a card, a field, a list that drops */
  --r-lg:14px;       /* a dialog */
  --r-pill:999px;    /* buttons, pill switches, tags */
  --ctrl-h:34px;     /* a button, a field */
  --hit:40px;        /* the main action, and the least a finger gets */

  /* ==========================================================
     5 · MOTION
     ========================================================== */
  --dur-fast:.12s;   /* hover, press, colour */
  --dur:.2s;         /* a small thing arriving */
  --dur-slow:.32s;   /* a dialog, a drawer */
  --dur-exit:.14s;   /* anything leaving */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --stagger:40ms;
  --press:.96;       /* scale on press. Exactly this */

  /* ==========================================================
     6 · LAYERS AND SHELL
     ========================================================== */
  --z-sticky:100; --z-nav:200; --z-overlay:400; --z-modal:500; --z-toast:600; --z-pop:700; --z-tip:800;
  --top-h:56px;      /* the top bar */
  --side-w:248px;    /* a sidebar of pages */
  --panel-w:400px;   /* a working side panel */
}

/* ---- DARK: designed, not inverted. The same tokens, night values ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#0f0f0f; --panel:#141414; --card:#1b1b1b; --card-2:#252525; --raise:#2e2e2e;
    --ink:#f2f2f2; --ink-2:#a8a8a8; --ink-3:#8c8c8c;
    --line:#242424; --line-2:#3a3a3a;
    --hero:#000000; --hero-ink:#ffffff; --focus:#f2f2f2; --scrim:rgba(0,0,0,.56);
    --yes:#32d74b; --no:#ff453a; --accent:#ff4d26;
    --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.08);
    --shadow-pop:0 24px 64px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    --shadow-page:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0f0f0f; --panel:#141414; --card:#1b1b1b; --card-2:#252525; --raise:#2e2e2e;
  --ink:#f2f2f2; --ink-2:#a8a8a8; --ink-3:#8c8c8c;
  --line:#242424; --line-2:#3a3a3a;
  --hero:#000000; --hero-ink:#ffffff; --focus:#f2f2f2; --scrim:rgba(0,0,0,.56);
  --yes:#32d74b; --no:#ff453a; --accent:#ff4d26;
  --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.08);
  --shadow-pop:0 24px 64px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-page:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.5);
}

@media (max-width:640px){
  :root{ --fs-row:20px; --fs-intro:16px; }
}
/* A finger needs more than a mouse. Keyed to the pointer, not the width. */
@media (pointer:coarse){
  :root{ --ctrl-h:40px; }
}