/*
 * Calibryo design tokens — single source of truth for color, type,
 * spacing and radii, shared by the home page, admin login, admin
 * panel and reviewer app.
 *
 * Each surface keeps its own local CSS-variable names where it
 * already had one (--accent vs --primary, --line vs --border, …) —
 * this file is not a rename, it is the VALUE those local variables
 * should point to, so every surface renders the same identity
 * without a risky rewrite of every rule that consumes them.
 *
 * Interactive colors (--brand-primary*) are deliberately darker than
 * the raw logo green (--brand-green) so text/background pairs clear
 * WCAG AA contrast; --brand-green itself is for decorative use only
 * (logo, soft tints, borders) — never as text on a light background.
 */

:root {
  /* Brand */
  --brand-green: #8FAF9A;
  --brand-ink: #1A1916;

  /* Interactive accent — derived from the logo green, dark enough
     for AA contrast as either text-on-white or white-on-fill. */
  --brand-primary: #3f6e58;
  --brand-primary-dark: #2f5443;
  --brand-primary-soft: #e7f0ec;

  /* Semantic status — one pair each, reused by every surface instead
     of each screen inventing its own greens/reds. */
  --brand-success-bg: #edf8f0;
  --brand-success-text: #2b6f3e;
  --brand-warning-bg: #fff8eb;
  --brand-warning-text: #8a5a12;
  --brand-danger-bg: #fdecea;
  --brand-danger-text: #c0392b;

  /* Neutral surface */
  --brand-bg: #eef2f5;
  --brand-panel: #ffffff;
  --brand-panel-soft: #f7fafc;
  --brand-border: #d8e2ec;
  --brand-text: #1a2b3c;
  --brand-muted: #5f7690;

  /* Typography — one stack, three heading levels, a body/label floor */
  --brand-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-font-mono: "DM Mono", Consolas, Monaco, monospace;
  --brand-h1: 28px;
  --brand-h2: 20px;
  --brand-h3: 15px;
  --brand-body: 14px;
  --brand-label: 13px;

  /* Spacing scale */
  --brand-space-1: 4px;
  --brand-space-2: 8px;
  --brand-space-3: 12px;
  --brand-space-4: 16px;
  --brand-space-5: 24px;
  --brand-space-6: 32px;

  /* Radius scale */
  --brand-radius-sm: 8px;
  --brand-radius-md: 12px;
  --brand-radius-lg: 16px;
}