/* ========================================================================
 * tokens.css — design tokens (single source of truth)
 *
 * Phase 0 of the atomic design system migration.
 * See docs/superpowers/specs/2026-05-08-atomic-design-system.md
 *
 * All design primitives (colors, typography stacks, shadows, fonts) live
 * here. Atoms / molecules / organisms reference these via `var(--name)`.
 *
 * Locked palette: Cabot Citrus Farms warm accents on dark navy base
 * (commit 74c2750).
 * ======================================================================== */

:root {
  /* ── Surfaces / backgrounds ─────────────────────────────── */
  --bg: #171B26;
  --bg-card: #1F2433;
  --bg-card2: #272D3E;
  --sidebar: #111520;
  --sidebar-hover: rgba(255,255,255,0.05);

  /* ── Borders ────────────────────────────────────────────── */
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);

  /* ── Typography colors ──────────────────────────────────── */
  --text: #F5EBD8;
  --muted: #8B92A5;
  --text-3: #4A5168;

  /* ── v1 palette — Cabot Citrus Farms warm accents ──────── */
  --gold: #E8B742;        /* primary CTA / brand / on-target hero */
  --gold-hover: #D9A82E;  /* primary CTA hover (darker gold, was legacy #6BA3F9 — fixed in Phase 1.1) */
  --teal: #6FA1A3;        /* success / under-target / good drift */
  --teal-hover: #5C8E90;  /* teal CTA hover */
  --terra: #C76A3F;       /* drift over-target / soft warning */
  --terra-hover: #B25A33; /* terra CTA hover (e.g. destructive action) */
  --terra-deep: #9A4525;  /* heavy drift / strong warning */
  --alarm: #E04B30;       /* severe alert / true critical only */

  /* ── Button-specific tokens (Phase 1.1) ─────────────────── */
  --btn-ghost-bg:        rgba(255,255,255,0.06);
  --btn-ghost-bg-hover:  rgba(255,255,255,0.09);
  --btn-ghost-border:    rgba(255,255,255,0.1);
  --btn-ghost-border-hover: rgba(255,255,255,0.16);
  --btn-focus-ring:      var(--gold);
  --btn-disabled-opacity: 0.5;

  /* ── Modal-specific tokens (Phase 1.2) ─────────────────── */
  --modal-overlay-bg:    rgba(0,0,0,0.75);
  --modal-z:             200;
  --modal-shadow:        0 24px 64px rgba(0,0,0,0.6);

  /* ── Spinner-specific tokens (Phase 1.3) ───────────────── */
  --spinner-track:       rgba(255,255,255,0.15);  /* unfilled portion of ring */
  --spinner-color:       var(--gold);             /* leading edge / progress arc */

  /* ── Card / KPI tokens (Phase 1.5) ─────────────────────── */
  --card-bg:             var(--bg-card);
  --card-bg-ghost:       transparent;
  --card-border:         var(--border);
  --card-border-strong:  var(--border-strong);
  --card-radius:         14px;
  --card-radius-sm:      10px;
  --card-padding:        20px;
  --card-padding-sm:     14px;
  --card-padding-md:     18px;
  --card-padding-lg:     22px;
  --card-header-mb:      14px;
  --card-footer-mt:      14px;
  --card-title-color:    var(--text);
  --card-subtitle-color: var(--muted);
  --card-shadow-sm:      0 4px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);

  --kpi-gap:             6px;
  --kpi-padding:         20px 22px;
  --kpi-label-color:     var(--muted);
  --kpi-value-color:     var(--text);
  --kpi-delta-color:     var(--muted);
  --kpi-delta-positive:  var(--teal);
  --kpi-delta-negative:  var(--terra);
  --kpi-sub-color:       var(--muted);

  /* ── Tab tokens (Phase 1.6) ────────────────────────────── */
  --tab-gap:              4px;
  --tab-padding-y:        8px;
  --tab-padding-x:        16px;
  --tab-bar-border:       var(--border);
  --tab-color:            var(--muted);
  --tab-color-hover:      var(--text);
  --tab-color-active:     var(--gold);
  --tab-active-underline: var(--gold);
  --tab-count-color:      var(--muted);

  /* ── Icon-button tokens (Phase 1.6) ────────────────────── */
  --icon-btn-bg:          rgba(255,255,255,0.06);
  --icon-btn-bg-hover:    rgba(255,255,255,0.10);
  --icon-btn-color:       var(--text);
  --icon-btn-color-hover: var(--text);

  /* ── Pill / Badge / Chip palette (Phase 1.6) ────────────
     Modifier rules in atoms.css read these; tokens stay here so the
     palette is swappable without touching the atom rule blocks. */
  --pill-success-bg:  rgba(111,161,163,0.15);    /* teal @ 15% */
  --pill-success-fg:  var(--teal);
  --pill-warning-bg:  rgba(232,183,66,0.15);     /* gold @ 15% */
  --pill-warning-fg:  var(--gold);
  --pill-danger-bg:   rgba(199,106,63,0.15);     /* terra @ 15% */
  --pill-danger-fg:   var(--terra);
  --pill-info-bg:     rgba(232,183,66,0.12);     /* gold @ 12% — info ≈ brand */
  --pill-info-fg:     var(--gold);
  --pill-neutral-bg:  rgba(255,255,255,0.08);
  --pill-neutral-fg:  var(--muted);

  /* ── Empty-state tokens (Phase 1.7) ────────────────────── */
  --empty-state-padding-y: 48px;
  --empty-state-padding-x: 24px;
  --empty-state-gap:       12px;
  --empty-state-color:     var(--muted);
  --empty-state-title:     var(--text);

  /* ── Form-specific tokens (Phase 1.4) ──────────────────── */
  --input-bg:                rgba(0,0,0,0.30);
  --input-bg-disabled:       rgba(255,255,255,0.04);
  --input-border:            var(--border);                   /* alias of --border for legibility */
  --input-border-hover:      rgba(255,255,255,0.18);
  --input-border-focus:      var(--gold);
  --input-color:             var(--text);
  --input-color-placeholder: rgba(245,235,216,0.32);          /* dim --text */
  --input-focus-ring:        rgba(232,183,66,0.35);           /* semi-transparent --gold */
  --input-disabled-opacity:  0.55;
  --input-radius:            8px;
  --input-padding-y:         10px;
  --input-padding-x:         12px;
  --input-padding-y-sm:      7px;
  --input-padding-x-sm:      10px;
  --label-color:             var(--text);
  --help-color:              var(--muted);
  --form-field-gap:          6px;

  /* ── Legacy var aliases (still referenced by inline styles) ── */
  --blue: var(--gold);
  --green: var(--teal);
  --red: var(--terra);
  --amber: var(--gold);
  --purple: #B89B7A;
  --orange: var(--gold);

  /* ── Composed tokens ────────────────────────────────────── */
  --card: var(--bg-card);
  --card-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);

  /* ── Fonts ──────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
}