/* The whole of yata's look, as tokens. Every other stylesheet reads from here
   and defines no colour of its own, so a new theme is this file's `:root` block
   and nothing else.

   Light and dark are the two built today. `light-dark()` picks between the raw
   pairs below, which is why the pairs stay as their own properties: a third
   theme overrides the raw values, not the hundred places that use them. */

@layer reset, base, components, utilities;

:root {
  /* The browser themes its own furniture — scrollbars, form controls, the
     canvas behind the page — from this, so it goes on the root and stays
     `light dark` unless the reader pins one. */
  color-scheme: light dark;

  /* ── raw pairs ─────────────────────────────────────────────────────── */
  --ground-l: oklch(98.6% 0.003 265);
  --ground-d: oklch(17% 0.008 265);
  --raised-l: oklch(100% 0 0);
  --raised-d: oklch(21.5% 0.009 265);
  --sunken-l: oklch(96% 0.004 265);
  --sunken-d: oklch(14.5% 0.007 265);

  --ink-l: oklch(23% 0.012 265);
  --ink-d: oklch(94% 0.006 265);
  --quiet-l: oklch(53% 0.014 265);
  --quiet-d: oklch(68% 0.014 265);
  --faint-l: oklch(64% 0.012 265);
  --faint-d: oklch(52% 0.012 265);

  --edge-l: oklch(92% 0.006 265);
  --edge-d: oklch(28% 0.01 265);
  /* `--edge` divides; `--edge-strong` is the edge of something you can touch,
     so it carries WCAG's 3:1 for a control boundary. The tick's ring is the
     app's primary control and used to sit at 1.6:1 — a smudge. */
  --edge-strong-l: oklch(66% 0.012 265);
  --edge-strong-d: oklch(51% 0.014 265);

  --accent-l: oklch(52% 0.19 264);
  --accent-d: oklch(76% 0.13 258);
  --accent-ink-l: oklch(100% 0 0);
  --accent-ink-d: oklch(19% 0.02 265);

  --danger-l: oklch(53% 0.2 25);
  --danger-d: oklch(72% 0.16 25);

  /* Now / Soon / Later, in the order PROJECT.md names them. */
  --now-l: oklch(58% 0.16 150);
  --now-d: oklch(72% 0.15 152);
  /* A yellow this light cannot carry 3:1 on white, and Soon is the middle of a
     three-value scale — the one it is worst to lose. Darkened until it reads. */
  --soon-l: oklch(58% 0.13 75);
  --soon-d: oklch(80% 0.14 82);
  --later-l: oklch(58% 0.19 22);
  --later-d: oklch(71% 0.16 22);

  /* ── what the rest of the CSS actually uses ────────────────────────── */
  --ground: light-dark(var(--ground-l), var(--ground-d));
  --raised: light-dark(var(--raised-l), var(--raised-d));
  --sunken: light-dark(var(--sunken-l), var(--sunken-d));
  --ink: light-dark(var(--ink-l), var(--ink-d));
  --quiet: light-dark(var(--quiet-l), var(--quiet-d));
  --faint: light-dark(var(--faint-l), var(--faint-d));
  --edge: light-dark(var(--edge-l), var(--edge-d));
  --edge-strong: light-dark(var(--edge-strong-l), var(--edge-strong-d));
  --accent: light-dark(var(--accent-l), var(--accent-d));
  --accent-ink: light-dark(var(--accent-ink-l), var(--accent-ink-d));
  --danger: light-dark(var(--danger-l), var(--danger-d));
  --now: light-dark(var(--now-l), var(--now-d));
  --soon: light-dark(var(--soon-l), var(--soon-d));
  --later: light-dark(var(--later-l), var(--later-d));

  /* Two surfaces that invert: a toast reads as the opposite of the page, and
     the scrim behind a sheet is darker than either. */
  --inverse-l: oklch(23% 0.012 265);
  --inverse-d: oklch(95% 0.006 265);
  --inverse-ink-l: oklch(97% 0 0);
  --inverse-ink-d: oklch(20% 0.01 265);
  --scrim-l: oklch(35% 0.02 265 / 0.3);
  --scrim-d: oklch(0% 0 0 / 0.55);

  --inverse: light-dark(var(--inverse-l), var(--inverse-d));
  --inverse-ink: light-dark(var(--inverse-ink-l), var(--inverse-ink-d));
  --scrim: light-dark(var(--scrim-l), var(--scrim-d));

  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-full: 999px;

  --lift: 0 1px 2px light-dark(oklch(0% 0 0 / 0.05), oklch(0% 0 0 / 0.3));
  --lift-high: 0 8px 30px light-dark(oklch(0% 0 0 / 0.11), oklch(0% 0 0 / 0.5));

  --step: 0.15s;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* Lets the composer's extra row animate open; ignored where unsupported,
     which costs the animation and nothing else. */
  interpolate-size: allow-keywords;

  accent-color: var(--accent);
  scrollbar-color: var(--edge-strong) transparent;
}

/* A reader who pinned a theme: `theme.js` writes this before first paint. The
   CSS above already follows the system, so this only ever overrides. */
:root[data-theme="light"] {
  color-scheme: light;
}

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

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, p, figure, dl, dd, ul, ol) {
    margin: 0;
    padding: 0;
  }

  :where(ul, ol):where([role="list"]) {
    list-style: none;
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }

  :where(img, svg) {
    display: block;
    max-width: 100%;
  }

  [hidden] {
    display: none !important;
  }
}

@layer base {
  html {
    /* Never a horizontal scrollbar from a long title. */
    overflow-x: hidden;
  }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  :where(a) {
    color: var(--accent);
  }

  /* One focus ring for the whole app, only for keyboards. */
  :where(:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  ::selection {
    background: color-mix(in oklch, var(--accent) 28%, transparent);
  }
}

@layer utilities {
  /* Present to a screen reader, absent to everyone else. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Motion is decoration here: every animation has a still equivalent. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}