/**
 * tokens.css — Design tokens shared across every page.
 *
 * Loaded BEFORE any page-specific stylesheet so the variables below
 * resolve in styles.css, admin.css, builder.css, and report.css.
 *
 * Only values that genuinely repeat across multiple files are tokenised.
 * Page-specific one-offs stay inline in their stylesheet.
 */

:root {
  /* ── Page background & text ───────────────────── */
  --color-bg-page:        #f5f0e8;  /* warm cream */
  --color-fg:             #000;
  --color-fg-secondary:   #333;     /* paragraphs, hover-button bg */
  --color-fg-muted:       #555;     /* secondary copy */
  --color-fg-subtle:      #888;     /* dates, hints */
  --color-fg-disabled:    #999;     /* disabled buttons, placeholder */

  /* ── Surfaces ─────────────────────────────────── */
  --color-surface:        #fff;
  --color-surface-input:  #fafafa;  /* input fields, dynamic-row bg */
  --color-surface-hover:  #f5f5f5;  /* hover background */
  --color-surface-soft:   #f0f0f0;  /* code blocks, btn-sm bg */

  /* ── Borders ──────────────────────────────────── */
  --color-border:         #ccc;
  --color-border-light:   #ddd;
  --color-border-subtle:  #eee;
  --color-border-hairline:#f0f0f0;

  /* ── Status (error / success) ─────────────────── */
  --color-error:          #d1242f;
  --color-error-bg:       #fef0f0;
  --color-error-border:   #f0c0c0;
  --color-success:        #1a7f37;
  --color-success-bg:     #e6f4ea;
  --color-success-bg-soft:#f0faf0;
  --color-success-border: #b8e0c8;

  /* ── Radii ────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  20px;
  --radius-4xl:  24px;
  --radius-pill: 999px;

  /* ── Shadow used on most cards ────────────────── */
  --shadow-card: 0 2px 8px rgba(0,0,0,.04);

  /* ── Type ─────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
