/* PadSquire design tokens.
   Shared by the website and the settings app: copy public/ds/ as it is.
   Light is the printed manual (soft paper, one blue spot ink); dark is the same sheet at night.
   The theme follows the system unless <html data-theme="light|dark"> pins it. */

@font-face {
  font-family: "Young Serif";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/young-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* -- colour: paper ------------------------------------------------------ */
  --paper: #f6f5f0;           /* page ground */
  --paper-raised: #fffffe;    /* sheets, cards, inputs */
  --paper-sunken: #ecebe4;    /* wells: code, tracks, table heads */
  --ink: #141a26;             /* text, blue-tinted near black */
  --ink-soft: #414a5b;        /* secondary text */
  --ink-faint: #5f6778;       /* hints, captions (>= 4.6:1 on every paper) */
  --line: #dcd9cf;            /* hairlines */
  --line-strong: #c4c0b4;     /* field borders, dividers that must read */

  /* -- colour: the one spot ink ------------------------------------------- */
  --accent: #2c48a8;          /* links, primary action, the drawing */
  --accent-strong: #213a8f;   /* hover / pressed */
  --accent-ink: #ffffff;      /* text on --accent */
  --accent-wash: #e3e8f8;     /* selected rows, active nav, live highlights */
  --accent-line: #b9c5ee;     /* tinted hairlines and tracks */

  /* -- colour: status (text-safe on every paper) ---------------------------- */
  --ok: #1d6e47;
  --ok-wash: #e0f0e6;
  --warn: #8a5a00;
  --warn-wash: #f6ecd2;
  --danger: #b42318;
  --danger-wash: #f9e3df;

  /* -- the controller drawing ---------------------------------------------- */
  --drawing-ink: var(--accent);
  --drawing-fill: var(--paper-raised);
  --drawing-active: var(--accent);       /* a pressed button, a live part */
  --drawing-muted: var(--ink-faint);     /* controllers not owned yet */
  --ignored: color-mix(in oklab, var(--ink-faint) 34%, var(--paper-raised)); /* dead-zone shading */

  /* -- overlays ------------------------------------------------------------ */
  --scrim: rgb(15 20 29 / .5);           /* behind dialogs */
  --shadow-color: rgb(20 26 38 / .3);    /* small control shadows (switch thumb) */

  /* -- type ---------------------------------------------------------------- */
  --font-display: "Young Serif", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  --text-xs: .8125rem;   /* 13 */
  --text-sm: .9375rem;   /* 15 */
  --text-md: 1.0625rem;  /* 17: body */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
  --text-3xl: clamp(2.125rem, 1.3rem + 3vw, 3.25rem);
  --text-display: clamp(2.5rem, 1.2rem + 5.2vw, 5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 700;

  /* -- space (4px steps) -------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* -- shape --------------------------------------------------------------- */
  --radius-xs: 6px;      /* chips, small marks */
  --radius-sm: 10px;     /* fields, code */
  --radius-md: 16px;     /* cards */
  --radius-lg: 24px;     /* panels, sheets, dialogs */
  --radius-pill: 999px;  /* buttons, switches, segmented controls */
  --hairline: 1px;

  /* -- depth: offset + soft blur, tinted with the ink ----------------------- */
  --shadow-card: 0 1px 2px rgb(20 26 38 / .05), 0 8px 24px -12px rgb(20 26 38 / .14);
  --shadow-pop: 0 2px 4px rgb(20 26 38 / .06), 0 16px 40px -16px rgb(20 26 38 / .22);
  --shadow-lift: 0 4px 8px rgb(20 26 38 / .05), 0 32px 64px -28px rgb(33 58 143 / .32);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);

  /* -- motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 560ms;

  /* -- layout -------------------------------------------------------------- */
  --container: 72rem;
  --measure: 66ch;
  --gutter: clamp(1.25rem, .75rem + 2vw, 2rem);
  /* the gutter, never inside a notch or rounded corner (needs viewport-fit=cover) */
  --gutter-safe: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));

  color-scheme: light;
}

/* Night: the same sheet in deep blue-black, ink the colour of paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f141d;
    --paper-raised: #171e2a;
    --paper-sunken: #0a0e15;
    --ink: #ecebe5;
    --ink-soft: #c0c5cf;
    --ink-faint: #959cab;
    --line: #2a3344;
    --line-strong: #3a4458;
    --accent: #9cb0f0;
    --accent-strong: #b8c7f5;
    --accent-ink: #0f141d;
    --accent-wash: #1c2747;
    --accent-line: #34437a;
    --ok: #6fd19e;
    --ok-wash: #15301f;
    --warn: #f0bf5a;
    --warn-wash: #33280f;
    --danger: #ff8e84;
    --danger-wash: #3a1915;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .5);
    --shadow-pop: 0 2px 4px rgb(0 0 0 / .3), 0 16px 40px -16px rgb(0 0 0 / .6);
    --shadow-lift: 0 4px 8px rgb(0 0 0 / .3), 0 32px 64px -28px rgb(0 0 0 / .7);
    --scrim: rgb(0 0 0 / .6);
    --shadow-color: rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f141d;
  --paper-raised: #171e2a;
  --paper-sunken: #0a0e15;
  --ink: #ecebe5;
  --ink-soft: #c0c5cf;
  --ink-faint: #959cab;
  --line: #2a3344;
  --line-strong: #3a4458;
  --accent: #9cb0f0;
  --accent-strong: #b8c7f5;
  --accent-ink: #0f141d;
  --accent-wash: #1c2747;
  --accent-line: #34437a;
  --ok: #6fd19e;
  --ok-wash: #15301f;
  --warn: #f0bf5a;
  --warn-wash: #33280f;
  --danger: #ff8e84;
  --danger-wash: #3a1915;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .5);
  --shadow-pop: 0 2px 4px rgb(0 0 0 / .3), 0 16px 40px -16px rgb(0 0 0 / .6);
  --shadow-lift: 0 4px 8px rgb(0 0 0 / .3), 0 32px 64px -28px rgb(0 0 0 / .7);
  --scrim: rgb(0 0 0 / .6);
  --shadow-color: rgb(0 0 0 / .5);
  color-scheme: dark;
}