/* Runo — design tokens.
 *
 * The single source of colour, space, type and motion. Nothing below this
 * file may invent a hex value: the old stylesheet had nine tokens and
 * twenty-two loose literals, which is why it drifted.
 *
 * **Layer order is declared here and nowhere else.**
 *
 * Both themes are defined. `prefers-color-scheme` picks the default and
 * `:root[data-theme]` lets a person override it — an audiobook app is used
 * in bed, and forcing either theme is a real usability failure.
 */

@layer tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    /* --- brand ---------------------------------------------------------
     * Runo is Finnish for "poem". Warm neutrals and an ember accent rather
     * than the generic SaaS blue: the product is read in the evening, and
     * lamplight is the right association. Amber doubles as the "in progress"
     * status, which is why `--warn` is deliberately not amber.
     */
    --ember-300: #f0c07a;
    --ember-400: #e6a94d;
    --ember-500: #c9852b;
    --ember-600: #a3661a;
    --ember-700: #7d4c11;

    /* --- spacing: a 4px scale, named by step, not by use ---------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* --- type ---------------------------------------------------------- */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    /* Serif for the wordmark and page titles only. System stack on purpose:
     * a webfont is a render-blocking third-party request, and this app has a
     * privacy posture to keep. */
    --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
                  serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-prose: 1.7;

    /* --- shape --------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* --- motion -------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0, 0.15, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;

    /* --- layout -------------------------------------------------------- */
    --topbar-h: 3.5rem;
    /* The phone's bottom navigation, and the mini player that stacks on top
     * of it. Both are fixed, so every page offset below is derived from
     * these rather than from a literal repeated in four places. */
    --mobile-nav-h: 3.5rem;
    --mini-player-h: 4rem;
    --content-max: 72rem;
    --prose-max: 42rem;
    /* Minimum interactive size. WCAG 2.2 target-size (2.5.8) asks 24px;
     * 44px is the touch-comfortable figure and what every control here uses,
     * because most listening happens on a phone. */
    --tap-min: 2.75rem;
  }

  /* --- dark: the default, because this is an evening product ----------- */
  :root,
  :root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #141311;
    --surface: #1c1a18;
    --surface-raised: #23211e;
    --surface-sunken: #100f0e;
    --border: #322e2a;
    --border-strong: #46403a;

    --text: #eae5dd;
    --text-muted: #a49c91;
    --text-faint: #776f66;
    --text-inverse: #17150f;

    --accent: var(--ember-400);
    --accent-hover: var(--ember-300);
    --accent-contrast: #17150f;
    --accent-subtle: color-mix(in oklab, var(--ember-400) 14%, transparent);

    --ok: #5fbf85;
    --ok-subtle: color-mix(in oklab, #5fbf85 14%, transparent);
    --warn: #63a6f5;
    --warn-subtle: color-mix(in oklab, #63a6f5 14%, transparent);
    --danger: #e56a6a;
    --danger-subtle: color-mix(in oklab, #e56a6a 14%, transparent);

    --focus: #8fc2ff;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.55);
  }

  /* --- light: warm paper, not clinical white --------------------------- */
  :root[data-theme="light"] {
    color-scheme: light;

    --bg: #f7f4ee;
    --surface: #fffdf9;
    --surface-raised: #ffffff;
    --surface-sunken: #efeae1;
    --border: #ddd5c8;
    --border-strong: #c3b8a6;

    --text: #221f1a;
    --text-muted: #635c52;
    --text-faint: #8a8177;
    --text-inverse: #fffdf9;

    /* Darker than the dark-theme accent so text on paper clears AA. */
    --accent: var(--ember-600);
    --accent-hover: var(--ember-700);
    --accent-contrast: #fffdf9;
    --accent-subtle: color-mix(in oklab, var(--ember-500) 16%, transparent);

    --ok: #1e7a4a;
    --ok-subtle: color-mix(in oklab, #1e7a4a 14%, transparent);
    --warn: #1d5fa8;
    --warn-subtle: color-mix(in oklab, #1d5fa8 14%, transparent);
    --danger: #b3372f;
    --danger-subtle: color-mix(in oklab, #b3372f 12%, transparent);

    --focus: #1d5fa8;
    --shadow-sm: 0 1px 2px rgb(60 50 35 / 0.10);
    --shadow-md: 0 4px 16px rgb(60 50 35 / 0.12);
    --shadow-lg: 0 12px 40px rgb(60 50 35 / 0.16);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;

      --bg: #f7f4ee;
      --surface: #fffdf9;
      --surface-raised: #ffffff;
      --surface-sunken: #efeae1;
      --border: #ddd5c8;
      --border-strong: #c3b8a6;

      --text: #221f1a;
      --text-muted: #635c52;
      --text-faint: #8a8177;
      --text-inverse: #fffdf9;

      --accent: var(--ember-600);
      --accent-hover: var(--ember-700);
      --accent-contrast: #fffdf9;
      --accent-subtle: color-mix(in oklab, var(--ember-500) 16%, transparent);

      --ok: #1e7a4a;
      --ok-subtle: color-mix(in oklab, #1e7a4a 14%, transparent);
      --warn: #1d5fa8;
      --warn-subtle: color-mix(in oklab, #1d5fa8 14%, transparent);
      --danger: #b3372f;
      --danger-subtle: color-mix(in oklab, #b3372f 12%, transparent);

      --focus: #1d5fa8;
      --shadow-sm: 0 1px 2px rgb(60 50 35 / 0.10);
      --shadow-md: 0 4px 16px rgb(60 50 35 / 0.12);
      --shadow-lg: 0 12px 40px rgb(60 50 35 / 0.16);
    }
  }
}