/* Clotr's suite look: the tokens (D190). "Ember dusk" in the dark and "morning linen" in the light, for every part
   of the suite: the extension's pages, Clotr for Windows, the Android keyboard's settings, Safari on iPhone and iPad,
   and the website.

   Dark first: the dark values are the base, light follows the system, and a
   page can pin either with data-theme="dark" or data-theme="light" on <html>. Names match the extension's
   popup.css and Clotr for Windows' settings.css where they mean the same thing (--page, --surface, --ink, --brand,
   --signal, --lift, --sheen…), so adopting the kit there is swapping a :root block.

   Rules the contrast check holds (tests/suite-kit.test.js, WCAG AA):
   - Text is --ink, --ink-2, --muted or --brand on --page, --side, --glass-top, --surface, --surface-2 or --tint (the
     warm tint a featured card starts from: the orange at 10% on the surface, never stronger under text).
   - On a --chip, text is --ink or --ink-2 (never --muted or --brand).
   - --signal is a fill (buttons, marks, the glow), never text; the text on it is --on-signal.
   - Focus rings use --focus (3:1 or more against every background).
   - The glows sit behind the page: no text needs them to be readable. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Ember dusk (dark, the base) ---------- */
:root {
  color-scheme: dark;
  /* Surfaces: a warm dusk, nothing darker than the page. */
  --page: #3a2f29;
  --side: #3e322b;
  --glass: rgba(62, 50, 43, 0.86);
  --glass-top: #4f3727;
  --surface: #4a3d35;
  --surface-2: #554032;
  --tint: #5c4130;
  --faint: #5f4f44;
  --line: #a39385;
  --wash: rgba(255, 230, 205, 0.07);
  --chip: #795339;
  /* Ink: cream on dusk. */
  --ink: #fcf5ee;
  --ink-2: #e8dbcf;
  --muted: #cfc1b4;
  /* Burnt orange: --brand is orange as text and links; --signal the fill of what you act on. */
  --brand: #ffab70;
  --focus: #ff6700;
  --signal: #ff6700;
  --on-signal: #2b1206;
  --signal-wash: #5a3622;
  /* States. Yellow means lemon. */
  --good: #8edcaa;
  --good-wash: #555648;
  --err: #ffb4ab;
  --err-wash: #5c4941;
  --lemon: #e8d23a;
  --lemon-ink: #f2df5c;
  --lemon-wash: #605236;
  /* The sunset: four soft lights behind everything. */
  --glow-top: rgba(255, 116, 36, 0.36);
  --glow-dawn: rgba(255, 92, 64, 0.26);
  --glow-soft: rgba(255, 196, 120, 0.16);
  --glow-4: rgba(214, 96, 140, 0.12);
  /* Light on things: a lit top edge, a soft lift, a gloss on the top half, the button's sheen. */
  --edge: inset 0 1px 0 rgba(255, 236, 218, 0.12);
  --lift: inset 0 1px 0 rgba(255, 236, 218, 0.1), 0 18px 40px -24px rgba(30, 12, 2, 0.55);
  --lift-hover:
    inset 0 1px 0 rgba(255, 236, 218, 0.14), 0 22px 46px -22px rgba(30, 12, 2, 0.65), 0 0 0 1px rgba(255, 140, 60, 0.18);
  --btn-lift: inset 0 1px 0 rgba(255, 236, 218, 0.08), 0 5px 12px -10px rgba(30, 12, 2, 0.7);
  --gloss: linear-gradient(180deg, rgba(255, 236, 218, 0.07), rgba(255, 236, 218, 0) 50%);
  --shadow: 0 18px 50px rgba(30, 12, 2, 0.4);
  /* The main button is lit like the tile: its gradient, a lit top edge, a thin rim darker than the fill, and a glow. */
  --sheen: linear-gradient(180deg, #ff8a3d, #ff6a10 58%, #e85500);
  --sheen-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(122, 42, 0, 0.28), 0 1px 2px rgba(122, 42, 0, 0.45);
  --sheen-glow: 0 12px 30px -6px rgba(255, 103, 0, 0.7);

  /* Type: Atkinson Hyperlegible, 400 and 700 only. A scale in steps of about 1.2. */
  --font: "Atkinson Hyperlegible", system-ui, "Segoe UI", sans-serif;
  --mono: Consolas, ui-monospace, monospace;
  --text-xs: 13px;
  --text-sm: 14.5px;
  --text: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 46px;
  --text-5xl: 64px;
  --leading: 1.55;
  --leading-tight: 1.12;
  --measure: 66ch;

  /* Corners: bigger things, rounder corners. */
  --r-control: 10px;
  --r-row: 12px;
  --r-tile: 11px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-pill: 999px;

  /* Space: a 4 px base. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;

  /* Motion: transform and opacity only, keyed to these curves; none under reduced motion (components.css). */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.2, 1.5, 0.4, 1);
  --t-press: 0.08s;
  --t-fast: 0.18s;
  --t-med: 0.28s;
  --t-slow: 0.45s;
  --drift: 40s;
  --drift-2: 56s;
}

/* ---------- Morning linen (light) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --page: #fdf8f2;
    --side: #f9f0e7;
    --glass: rgba(249, 240, 231, 0.86);
    --glass-top: #fae4d2;
    --surface: #fffdfa;
    --surface-2: #fffaf5;
    --tint: #ffeee1;
    --faint: #eee2d6;
    --line: #a89a8d;
    --wash: rgba(120, 60, 20, 0.05);
    --chip: #efd8c5;
    --ink: #2b1f17;
    --ink-2: #594a3e;
    --muted: #75655a;
    --brand: #ad4508;
    --focus: #ad4508;
    --signal-wash: #fff0e6;
    --good: #1f7a3f;
    --good-wash: #e9f0e7;
    --err: #b3261e;
    --err-wash: #f7e8e4;
    --lemon: #e2c81c;
    --lemon-ink: #6b5a00;
    --lemon-wash: #faf3d2;
    --glow-top: rgba(255, 140, 60, 0.2);
    --glow-dawn: rgba(255, 190, 110, 0.24);
    --glow-soft: rgba(255, 165, 140, 0.15);
    --glow-4: rgba(255, 120, 60, 0.1);
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --lift:
      inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(60, 30, 10, 0.06), 0 16px 38px -18px rgba(140, 70, 20, 0.2);
    --lift-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(90, 45, 10, 0.06),
      0 22px 44px -20px rgba(160, 80, 20, 0.32);
    --btn-lift: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 5px 12px -10px rgba(90, 45, 10, 0.4);
    --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
    --shadow: 0 18px 50px rgba(90, 45, 10, 0.14);
    --sheen-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(122, 42, 0, 0.28), 0 1px 2px rgba(122, 42, 0, 0.25);
    --sheen-glow: 0 12px 30px -6px rgba(232, 85, 0, 0.5);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #fdf8f2;
  --side: #f9f0e7;
  --glass: rgba(249, 240, 231, 0.86);
  --glass-top: #fae4d2;
  --surface: #fffdfa;
  --surface-2: #fffaf5;
  --tint: #ffeee1;
  --faint: #eee2d6;
  --line: #a89a8d;
  --wash: rgba(120, 60, 20, 0.05);
  --chip: #efd8c5;
  --ink: #2b1f17;
  --ink-2: #594a3e;
  --muted: #75655a;
  --brand: #ad4508;
  --focus: #ad4508;
  --signal-wash: #fff0e6;
  --good: #1f7a3f;
  --good-wash: #e9f0e7;
  --err: #b3261e;
  --err-wash: #f7e8e4;
  --lemon: #e2c81c;
  --lemon-ink: #6b5a00;
  --lemon-wash: #faf3d2;
  --glow-top: rgba(255, 140, 60, 0.2);
  --glow-dawn: rgba(255, 190, 110, 0.24);
  --glow-soft: rgba(255, 165, 140, 0.15);
  --glow-4: rgba(255, 120, 60, 0.1);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(60, 30, 10, 0.06), 0 16px 38px -18px rgba(140, 70, 20, 0.2);
  --lift-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(90, 45, 10, 0.06), 0 22px 44px -20px rgba(160, 80, 20, 0.32);
  --btn-lift: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 5px 12px -10px rgba(90, 45, 10, 0.4);
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
  --shadow: 0 18px 50px rgba(90, 45, 10, 0.14);
  --sheen-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(122, 42, 0, 0.28), 0 1px 2px rgba(122, 42, 0, 0.25);
  --sheen-glow: 0 12px 30px -6px rgba(232, 85, 0, 0.5);
}