/* Overprint: the design tokens of the Woffle website.
   Two inks from the app icon, coral and sky. Where they overlap
   (mix-blend-mode: multiply) they make plum: #FF6B6B × #4DABF7 = #4D4868.
   Flat color only, no gradients. Light by default; dark mode redefines
   the theme colors at the end of this file. See README.md. */

:root {
  color-scheme: light dark;

  /* Inks: fills and illustration, never text on the page. The same in
     dark mode, and so are the ink labels on them. */
  --color-coral: #ff6b6b;
  --color-sky: #4dabf7;
  --color-plum: #4d4868; /* coral × sky; also a quiet dark */
  --color-ink: #1e1b2e; /* labels on coral and sky, ink sections, code */
  --color-icon-ground: #fff8ec; /* the app icon's own ground, only in the icon */

  /* On ink (contrast on ink) */
  --color-on-ink: #ffffff; /* 16.8:1 */
  --color-on-ink-2: #b7b3cc; /* lavender: secondary text, code comments, 8.3:1 */
  --color-coral-light: #ff8787; /* at-rules, accents: 7.3:1 */
  --color-sky-light: #74c0fc; /* properties, links: 8.5:1 */
  --color-code-string: #ffe4e1; /* strings in code blocks */
  --color-ink-raised: #27243a; /* code panel on an ink section */
  --color-ink-line: #332f48; /* lines and buttons inside code panels */

  /* States */
  --color-coral-pressed: #f25c5c;

  /* Type families: self-hosted, converted with Woffle */
  --font-display: Zain, "Avenir Next", system-ui, sans-serif;
  --font-text: Zain, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  /* Zain's Latin is small for its size (x-height 0.46–0.47 em): set
     font-size-adjust on the body to this, which scales it up to an x-height
     of half the font size, as the type scale below expects */
  --font-size-adjust: 0.5;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;

  /* Type scale: size, weight, line height, tracking */
  --text-display: clamp(3.5rem, 8vw, 6rem); /* 56–96 px */
  --weight-display: 700;
  --leading-display: 0.95;
  --tracking-display: -0.03em;

  --text-h1: clamp(2.5rem, 6vw, 4rem); /* 40–64 px */
  --weight-h1: 700;
  --leading-h1: 1;
  --tracking-h1: -0.03em;

  --text-h2: clamp(2rem, 4.5vw, 3rem); /* 32–48 px */
  --weight-h2: 700;
  --leading-h2: 1.05;
  --tracking-h2: -0.025em;

  --text-h3: 2rem; /* 32 px */
  --weight-h3: 700;
  --leading-h3: 1.15;
  --tracking-h3: -0.015em;

  --text-h4: 1.375rem; /* 22 px */
  --weight-h4: 600;
  --leading-h4: 1.3;
  --tracking-h4: -0.01em;

  --text-lead: 1.375rem; /* 22 px, text-2 */
  --leading-lead: 1.5;
  --text-body: 1.0625rem; /* 17 px */
  --leading-body: 1.65;
  --text-small: 0.9375rem; /* 15 px */
  --leading-small: 1.55;
  --text-caption: 0.8125rem; /* 13 px, text-3 */
  --leading-caption: 1.45;

  --text-eyebrow: 0.8125rem; /* 13 px mono 500, caps */
  --tracking-eyebrow: 0.08em;
  --text-code: 0.875rem; /* 14 px in blocks */
  --leading-code: 1.75;

  /* Space: 4 px base, big jumps */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 3rem; /* 48 */
  --space-8: 4rem; /* 64 */
  --space-9: 6rem; /* 96 */
  --space-10: 8rem; /* 128 */
  --space-11: 10rem; /* 160 */

  /* Layout */
  --content-max: 1200px; /* 12 columns, 24 px gutter */
  --gutter: 24px;
  --text-max: 680px;
  --article-max: 720px;
  --page-margin: clamp(16px, 4vw, 32px);
  --section-padding: clamp(80px, 10vw, 128px);

  /* Radius */
  --radius-xs: 6px; /* keys, code tags */
  --radius-sm: 12px; /* inputs, icon tiles */
  --radius-md: 16px; /* code blocks, small cards */
  --radius-lg: 24px; /* cards, callouts */
  --radius-xl: 36px; /* panels, bands */
  --radius-pill: 999px; /* buttons, pills, tabs */

  /* Depth: flat by default; plates are flat ink, offset down and right */
  --plate-sky: 4px 4px 0 var(--color-sky); /* hover on coral and paper */
  --plate-coral: 4px 4px 0 var(--color-coral); /* hover on ink */
  --plate-featured: 8px 8px 0 var(--color-coral); /* featured card */

  /* Motion */
  --lift: translate(-2px, -2px);
  --press: translate(1px, 1px);
  --duration-lift: 140ms;
  --ease-lift: ease-out;

  /* Focus */
  --focus-offset: 3px;

  /* Controls */
  --button-height-l: 56px; /* 17 px label, heroes */
  --button-height-m: 48px; /* 16 px label, sections */
  --button-height-s: 40px; /* 15 px label, nav bar */
  --input-height: 52px;
  --search-height: 56px;
}

/* Theme: grounds, text, lines and tints (contrast on paper; the dark
   values are below). They are set on the root and on any element with
   data-theme, so a part of a page can have a theme of its own. */
:root,
[data-theme="light"] {
  --color-paper: #ffffff; /* the page */
  --color-cream: #fffefc; /* white with 1% warmth: alternate sections, panels, footer */
  --color-surface: #ffffff; /* cards, inputs, tiles */
  --color-text: #1e1b2e; /* 16.8:1 */
  --color-text-2: #57536e; /* body in sections, leads: 7.3:1 */
  --color-text-3: #6b6783; /* captions, eyebrows, meta: 5.4:1 */
  --color-text-faint: #9e9ab5; /* characters left out of a subset; decoration only */
  --color-link: #1864ab; /* sky deep: links, focus rings, 6.1:1 */
  --color-coral-text: #c92a2a; /* errors, coral text, arrows: 5.5:1 */
  --color-coral-tint: #ffe4e1; /* caution callouts, feature cards */
  --color-on-coral-tint: #b42b2b; /* text on coral tint: 5.3:1 */
  --color-sky-tint: #ddeffe; /* note callouts, feature cards */
  --color-plum-tint: #ece9f5; /* tip callouts, tracks, quiet pills, inline code */
  --color-on-plum-tint: #4d4868; /* text on plum tint: 7.2:1 */
  --color-line: #e9e5dd; /* dividers, card borders */
  --color-line-strong: #cfcadb; /* input borders, keys, chips */
  --color-bar: #4d4868; /* coverage bars */
  --color-marker-sky: #4dabf7; /* heading markers */
  --color-marker-coral: #ff6b6b;
  --color-solid: #1e1b2e; /* Dark buttons, selected chips, checked boxes */
  --color-on-solid: #ffffff;
  --color-focus-halo: #bee0fc; /* 4 px ring around a focused input */
  --shadow-float: 0 2px 6px rgb(30 27 46 / 0.06),
    0 28px 56px -20px rgb(30 27 46 / 0.28); /* app windows, menus only */
}

[data-theme="light"] {
  color-scheme: light;
}

/* Tokens made of theme colors are worked out again wherever the theme
   can change, or they would keep the colors of the root. */
:root,
[data-theme] {
  --color-disabled-bg: var(--color-plum-tint);
  --color-disabled-text: var(--color-text-3);
  --focus-ring: 3px solid var(--color-link);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift: none;
    --press: none;
    --duration-lift: 0ms;
  }
}

/* Dark mode follows the system setting. data-theme="light" or "dark" on
   <html> overrides it, for a theme switch, and so it does on any other
   element ("auto" there follows the system again). Only the theme colors
   and the float shadow change; the inks and everything else stay.
   Contrast is on the dark paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  [data-theme="auto"] {
    color-scheme: dark;
    --color-paper: #15131f;
    --color-cream: #1b1928;
    --color-surface: #232033;
    --color-text: #f4f2f8; /* 16.5:1 */
    --color-text-2: #bdb9d0; /* 9.6:1 */
    --color-text-3: #a29eb8; /* 7.1:1 */
    --color-text-faint: #5f5b78;
    --color-link: #74c0fc; /* 8.1:1 on surface */
    --color-coral-text: #ff8787; /* 7.9:1 */
    --color-coral-tint: #3a2230;
    --color-on-coral-tint: #ffb8b0; /* 8.8:1 */
    --color-sky-tint: #172b42;
    --color-plum-tint: #2a2641;
    --color-on-plum-tint: #d3cfe6; /* 9.5:1 */
    --color-line: #2e2b40;
    --color-line-strong: #4a4562;
    --color-bar: #b7b3cc;
    --color-marker-sky: #1864ab; /* light text on it: 5.5:1 */
    --color-marker-coral: #b8322f; /* light text on it: 5.4:1 */
    --color-solid: #f4f2f8; /* light buttons on the dark page */
    --color-on-solid: #1e1b2e;
    --color-focus-halo: #1d3a5c;
    --shadow-float: 0 0 0 1px #2e2b40, 0 28px 56px -24px rgb(0 0 0 / 0.6);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: #15131f;
  --color-cream: #1b1928;
  --color-surface: #232033;
  --color-text: #f4f2f8;
  --color-text-2: #bdb9d0;
  --color-text-3: #a29eb8;
  --color-text-faint: #5f5b78;
  --color-link: #74c0fc;
  --color-coral-text: #ff8787;
  --color-coral-tint: #3a2230;
  --color-on-coral-tint: #ffb8b0;
  --color-sky-tint: #172b42;
  --color-plum-tint: #2a2641;
  --color-on-plum-tint: #d3cfe6;
  --color-line: #2e2b40;
  --color-line-strong: #4a4562;
  --color-bar: #b7b3cc;
  --color-marker-sky: #1864ab;
  --color-marker-coral: #b8322f;
  --color-solid: #f4f2f8;
  --color-on-solid: #1e1b2e;
  --color-focus-halo: #1d3a5c;
  --shadow-float: 0 0 0 1px #2e2b40, 0 28px 56px -24px rgb(0 0 0 / 0.6);
}