/* tokens.css — the whole visual identity of the suite, in one file.
 *
 * Nothing here is loaded from a network: no @font-face, no @import, no CDN.
 * Every site in the suite ships this file byte-identical (see scripts/sync.mjs).
 *
 * Identity in one line: a paper-and-ink instrument panel. Warm off-white stock,
 * near-black ink, one ochre accent used only where the user acts, hairline
 * rules instead of shadows, and square-ish 3px corners instead of the pill
 * radii every template ships with.
 */

:root {
  color-scheme: light dark;

  /* --- ink & paper ------------------------------------------------------ */
  --c-paper:        #f7f4ee;  /* page */
  --c-paper-raised: #fffdf9;  /* panels sitting on the page */
  --c-paper-sunken: #efeae1;  /* wells, inputs, code blocks */
  --c-ink:          #191713;  /* body text */
  --c-ink-muted:    #5d574c;  /* secondary text */
  --c-ink-faint:    #8b8477;  /* captions, hints */
  --c-rule:         #ddd6c8;  /* hairlines */
  --c-rule-strong:  #b9b0a0;

  /* --- accent: used only for things the reader can act on --------------- */
  --c-accent:       #9a5b12;
  --c-accent-hover: #7c4a0e;
  --c-accent-weak:  #f0e2cc;
  --c-on-accent:    #fffdf9;

  /* --- state ------------------------------------------------------------ */
  --c-ok:      #2f6b45;
  --c-ok-weak: #dfeee5;
  --c-warn:      #8a5a00;
  --c-warn-weak: #f6e8cd;
  --c-err:      #99271f;
  --c-err-weak: #f6ddd9;

  --c-focus: #1f5fbf;

  /* --- type -------------------------------------------------------------
   * System stacks only. A webfont would be a third-party request, and the
   * suite's core promise is that there are none.
   * Scale: 1.200 (minor third) off a 16px base.                            */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --t-xs:   0.694rem;
  --t-sm:   0.833rem;
  --t-base: 1rem;
  --t-md:   1.2rem;
  --t-lg:   1.44rem;
  --t-xl:   1.728rem;
  --t-2xl:  2.074rem;

  --lh-tight: 1.2;
  --lh-body:  1.6;
  --tracking-caps: 0.08em;

  /* --- space: 4px base --------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* --- shape ------------------------------------------------------------- */
  --radius:    3px;
  --radius-lg: 4px;
  --hairline:  1px;
  --measure:   68ch;   /* prose line length */
  --page:      74rem;  /* max page width */

  --focus-ring: 2px solid var(--c-focus);
  --focus-offset: 2px;

  --motion-fast: 90ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-paper:        #14140f;
    --c-paper-raised: #1c1c17;
    --c-paper-sunken: #100f0c;
    --c-ink:          #ece7dc;
    --c-ink-muted:    #a7a094;
    --c-ink-faint:    #7d766a;
    --c-rule:         #33322b;
    --c-rule-strong:  #4e4c42;

    --c-accent:       #e2a250;
    --c-accent-hover: #f0b467;
    --c-accent-weak:  #33270f;
    --c-on-accent:    #14140f;

    --c-ok:      #7fc79b;
    --c-ok-weak: #16241c;
    --c-warn:      #e0b05a;
    --c-warn-weak: #2a2110;
    --c-err:      #ef9a90;
    --c-err-weak: #2d1512;

    --c-focus: #7fb0ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; }
}