/* tokens.css — single source of truth for design tokens.
 *
 * See docs/superpowers/specs/2026-04-18-css-design-rules.md for the
 * rules governing when to use each token. Never add a token outside
 * this file; never inline a value that could be a token.
 */

:root {
  /* Typography scale (5 sizes, 1.25 ratio) */
  --fs-caption:  0.75rem;
  --fs-body:     0.875rem;
  --fs-emphasis: 1rem;
  --fs-heading:  1.25rem;
  --fs-display:  1.5rem;

  /* Spacing scale (7 rem tokens) */
  --sp-xxs: 0.125rem;
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-xxl: 3rem;

  /* Sheet color palette (paper theme) */
  --color-bg:            #1a1a20;
  --color-surface:       #f5f0e8;
  --color-surface-muted: #ebe6dc;
  --color-fg:            #000;
  --color-fg-muted:      #555;
  --color-border:        #000;
  --color-accent:        #1a4480;
  --color-accent-fg:     #fff;
  --color-paper:           #fff;       /* bright paper surface (inputs, cards) */
  --color-divider-light:   #ccc;       /* light dividers, placeholder text */
  --color-fg-subtle:       #888;       /* unit labels, subtle borders, tabular-num muted */
  --color-overlay-bg:      #333;       /* dark overlay UI (toasts, tooltips) on sheet */
  --color-error:           #e53e3e;    /* error text/borders */
  --color-focus-bg:        #f0f4ff;    /* soft focus background tint */

  /* Chrome color palette (debug surfaces) */
  --chrome-bg:       #1a1a20;
  --chrome-surface:  #10101a;
  --chrome-border:   #2a2a34;
  --chrome-fg:       #e0e0e0;
  --chrome-fg-muted: #aaa;
  --chrome-accent:   #64b5f6;
  --chrome-fg-bright: #fff;         /* brighter than --chrome-fg, for active tabs / headings */

  /* Shadows */
  --shadow-preview-card: 0 4px 20px rgba(0, 0, 0, 0.5);
}