/* tokens.css — Veriqo unified design tokens
   All CSS custom properties for the app.
   Module-specific overrides live in their own CSS files. */

:root {
  /* ── Primary palette (Veriqo green) ─────────────────────── */
  --vq-green:        #2D7A3A;
  --vq-green-dark:   #1a4a23;
  --vq-green-mid:    #245f2e;
  --vq-green-light:  #EAF3DE;
  --vq-green-pale:   #f0f8f1;

  /* ── Neutral / surface ───────────────────────────────────── */
  --vq-bg:           #f5f4f0;
  --vq-surface:      #ffffff;
  --vq-surface-alt:  #f9f8f5;
  --vq-border:       #e5e4de;
  --vq-border-mid:   #d4d2cb;
  --vq-rule:         #f0efe8;

  /* ── Text ────────────────────────────────────────────────── */
  --vq-ink:          #1a1a18;
  --vq-muted:        #5a5752;   /* darkened: ~5.1:1 on cream — WCAG AA */
  --vq-subtle:       #7a7870;   /* darkened from #aaa for body use */
  --vq-subtle-decorative: #aaaaaa; /* purely decorative, non-essential */
  --vq-disabled:     #cccccc;

  /* ── Status ──────────────────────────────────────────────── */
  --vq-ok:           #2D7A3A;
  --vq-ok-bg:        #EAF3DE;
  --vq-ok-text:      #2D7A3A;
  --vq-warn:         #854F0B;
  --vq-warn-bg:      #FAEEDA;
  --vq-warn-text:    #854F0B;
  --vq-fail:         #A32D2D;
  --vq-fail-bg:      #FCEBEB;
  --vq-fail-text:    #A32D2D;
  --vq-info:         #1a5c8c;
  --vq-info-bg:      #e3f0fb;

  /* ── Costing module accent (gold) ────────────────────────── */
  --vq-gold:         #C9A84C;
  --vq-gold-dark:    #0E0E0D;
  --vq-gold-surface: #fdf9f0;
  --vq-gold-border:  #e8d89a;

  /* ── Typography ──────────────────────────────────────────── */
  --vq-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vq-font-serif:   'Instrument Serif', Georgia, serif;
  --vq-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Spacing ─────────────────────────────────────────────── */
  --vq-space-xs:     4px;
  --vq-space-sm:     8px;
  --vq-space-md:     12px;
  --vq-space-lg:     16px;
  --vq-space-xl:     24px;
  --vq-space-2xl:    32px;

  /* ── Radii ───────────────────────────────────────────────── */
  --vq-radius-sm:    6px;
  --vq-radius-md:    10px;
  --vq-radius-lg:    14px;
  --vq-radius-xl:    18px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --vq-shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --vq-shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --vq-shadow-lg:    0 8px 24px rgba(0,0,0,0.12);

  /* ── Semantic aliases (map to primitives above) ─────────── */
  --color-bg-cream:          var(--vq-bg);
  --color-bg-card:           var(--vq-surface);
  --color-brand-green:       var(--vq-green);
  --color-brand-green-soft:  var(--vq-green-light);
  --color-text-primary:      var(--vq-ink);
  --color-text-secondary:    var(--vq-muted);      /* #5a5752 */
  --color-text-tertiary:     var(--vq-subtle);     /* #7a7870 */
  --color-border-subtle:     var(--vq-border);
  --color-accent-alert:      var(--vq-fail);
  --color-accent-warning:    var(--vq-warn);

  /* ── Type scale ──────────────────────────────────────────── */
  --vq-text-xs:    11px;
  --vq-text-sm:    13px;
  --vq-text-md:    14px;
  --vq-text-lg:    16px;
  --vq-text-xl:    18px;
  --vq-text-2xl:   22px;

  /* ── Shell layout ────────────────────────────────────────── */
  --shell-nav-height:     60px;    /* bottom nav height on mobile */
  --shell-sidebar-width:  220px;   /* sidebar width on desktop */
  --shell-max-width:      480px;   /* max content width on mobile */
}