/* shmey design tokens — the one place a value is decided.
   Every stylesheet, mail and script in the site and the panel draws from these; nothing else holds
   a raw colour, size, radius, shadow or duration. This file is identical in site/ and panel/.
   On an owner's machine, ~/.config/shmey/theme.css is loaded after it and may override any token. */
:root {
  color-scheme: light;

  /* Colour: a bright day. Cream page, navy ink. The names are older than the look: "night" is the
     page background, "gold" is the colour of the one main action (coral), "serif" is the display font. */
  --night: #fff8e6; --deep: #16233a; --indigo: #c9eaff;
  --panel: #ffffff; --panel-2: #ffffff; --term: #0f1a2e;
  --step-top: #ffd23f; --step-bottom: #ffd23f;
  /* Colour: text. Soft and faint are mixed from pale. */
  --ink: #16233a; --pale: #16233a; --mist: #3a4a66; --log-ink: #16233a;
  --soft: color-mix(in srgb, var(--pale) 72%, transparent); --faint: color-mix(in srgb, var(--pale) 46%, transparent);
  /* Colour: the main action. Reserved for the single main action on a screen. */
  --gold: #f2503b; --gold-light: #ff6b57; --gold-glow: #ffb3a8; --gold-ink: #ffffff; --dawn: #ffd23f;
  /* Colour: the sticker palette, for blocks, tiles and highlights */
  --c-sky: #8fd0ff; --c-sky-2: #c9eaff; --c-sun: #ffd23f; --c-mint: #7fe3b3; --c-lilac: #c9b6ff; --c-coral: #ff6b57; --c-white: #ffffff;
  /* Colour: states */
  --ok: #0f8a58; --ok-ink: #ffffff; --bad: #d2352a; --warn: #a86400; --sky: #1668cf;
  /* Colour: lines are a tint of the ink; shade is the light laid over a surface */
  --tint: #16233a; --shade: #fff;
  --glass: #ffffff; --glass-2: #c9eaff; --line: color-mix(in srgb, var(--tint) 18%, transparent);
  --hero-top: #16233a; --hero-mid: #16233a; --hero-low: #16233a; --qr-bg: #fff;
  /* Colour: mail is read on a light background */
  --mail-bg: #fff8e6; --mail-card: #ffffff; --mail-ink: #16233a; --mail-soft: #6b7689; --mail-line: #e8e2cf; --mail-note-bg: #fff1bf; --mail-note-ink: #4a3a00;

  /* Type: families */
  --serif: "Fredoka", "Rubik", system-ui, sans-serif;
  --sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  /* Type: sizes */
  --t-2xs: 12px; --t-xs: 13px; --t-sm: 14px; --t-md: 15px; --t-base: 16px; --t-body: 17px; --t-lg: 18px; --t-xl: 20px;
  --t-2xl: 22px; --t-3xl: 24px; --t-4xl: 28px; --t-5xl: 32px; --t-6xl: 44px; --t-num: 64px; --t-code: .9em; --t-up: 1.1em;
  /* Type: display sizes, fluid */
  --d-hero: clamp(50px, 8.6vw, 104px); --d-cta: clamp(42px, 7.5vw, 86px); --d-band: clamp(34px, 5.4vw, 58px);
  --d-title: clamp(32px, 5.5vw, 48px); --d-sub: clamp(28px, 4.5vw, 38px); --d-step: clamp(24px, 3vw, 34px);
  --d-lede: clamp(18px, 2.3vw, 22px); --d-intro: clamp(17px, 2vw, 20px); --d-code: clamp(22px, 5vw, 34px); --d-mega: clamp(90px, 23vw, 320px);
  /* Type: weight, line height, tracking */
  --w-regular: 400; --w-display: 700; --w-medium: 500; --w-bold: 600;
  --lh-crush: .85; --lh-hero: .98; --lh-flat: 1; --lh-display: 1.12; --lh-tight: 1.2; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65;
  --ls-tight: -.01em; --ls-none: 0; --ls-slight: .02em; --ls-wide: .08em; --ls-caps: .04em;

  /* Space */
  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-18: 18px; --s-20: 20px;
  --s-24: 24px; --s-28: 28px; --s-32: 32px; --s-40: 40px; --s-56: 56px; --s-72: 72px; --s-80: 80px; --s-90: 90px;

  /* Shape */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px; --r-pill: 999px; --r-round: 50%;
  --hair: 1px; --rule: 2px; --bar: 4px;
  --size-dot: 12px; --size-check: 26px; --size-step: 34px; --size-control: 44px; --size-seal: 50px; --size-qr: 190px; --nav-h: 68px;

  /* Layout widths and text measures */
  --w-page: 1120px; --w-wide: 1180px; --w-panel: 1040px; --w-chat: 860px; --w-read: 760px; --w-text: 640px; --w-form: 560px;
  --gutter: 16px; --band-pad: clamp(56px, 8vw, 90px);
  --measure: 58ch; --measure-narrow: 34ch; --measure-title: 16ch; --measure-tight: 12ch;

  /* Depth and light: a thick ink outline and a hard offset shadow, like a sticker */
  --edge-w: 2.5px; --edge: var(--edge-w) solid var(--ink); --pop: 5px 5px 0 var(--ink); --pop-sm: 3px 3px 0 var(--ink); --pop-lg: 9px 9px 0 var(--ink);
  --shadow-card: var(--pop);
  --glow-action: var(--pop-sm);
  --glow-action-hover: var(--pop);
  --glow-brand: none;
  --glow-gold: var(--pop-sm); --glow-ok: none;
  --glow-spark: none;
  --ring: 0 0 0 4px color-mix(in srgb, var(--gold) 28%, transparent);
  --ring-big: var(--pop), 0 0 0 5px color-mix(in srgb, var(--gold) 28%, transparent);
  --blur-sm: 6px; --blur: 14px; --blur-lg: 18px;
  --z-sky: -2; --z-under: -1; --z-nav: 20;

  /* Motion */
  --dur-fast: .15s; --dur: .2s; --dur-slow: .9s; --dur-fade: 1.4s; --dur-pulse: 1.6s; --dur-spin: .9s; --dur-drip: 2.4s; --stagger: 90ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}