/* =============================================================================
 * tokens.css — single source of truth for design tokens
 *
 * Loaded BEFORE app.css and theme.css in layout.php so it sets a baseline
 * the older stylesheets can override only when they have a stronger reason.
 * Closes Agent 5's design-system finding: app.css and theme.css both
 * defined `--brand` differently (cobalt #0038A8 vs indigo #1E3A8A) and
 * fought across the surface area. This file standardises ALL semantic
 * token names so future templates can drop their hardcoded colors.
 *
 * Aesthetic rationale (Agent 5 + uix-global-design):
 *   • Philippine flag palette (cobalt + flag-yellow + flag-red) — gov
 *     identity, not generic SaaS purple. Anti-AI-slop.
 *   • Dual primary fonts already in use (Manrope UI + Instrument Serif
 *     display) — preserved here, not replaced with reflex Inter/Arial.
 *   • 4px spacing scale — matches what the existing components use.
 *   • Domain-specific accent (Political = purple, Assistance = amber)
 *     stays separate so visual purpose is communicated by hue.
 * ============================================================================= */

:root {
  /* ── Brand: Philippine flag, refined ─────────────────────────────── */
  --c-primary:        #0038A8;          /* PH flag cobalt */
  --c-primary-700:    #002A82;
  --c-primary-50:     #E8EEF8;
  --c-accent:         #FFC72C;          /* PH flag yellow */
  --c-accent-700:     #B45309;
  --c-accent-50:      #FFFBEB;
  --c-danger:         #CE1126;          /* PH flag red */
  --c-danger-50:      #FEF2F2;
  --c-success:        #0F8B4A;
  --c-success-50:     #ECFDF5;
  --c-warn:           #B45309;
  --c-warn-50:        #FFFBEB;
  --c-info:           #1E40AF;
  --c-info-50:        #EFF6FF;

  /* Domain-only accents (NEVER use for unrelated UI flair). */
  --c-political:      #7C3AED;          /* Political domain */
  --c-assistance:     #D97706;          /* Assistance domain */

  /* ── Surface ─────────────────────────────────────────────────────── */
  --c-bg:             #F4F7FC;
  --c-surface:        #FFFFFF;
  --c-surface-2:      #F8FBFF;
  --c-border:         #DBE4F5;
  --c-border-strong:  #B6C5E5;
  --c-ink:            #0F1B33;
  --c-ink-2:          #475569;
  --c-ink-3:          #64748B;
  --c-ink-muted:      #94A3B8;
  --c-on-primary:     #FFFFFF;
  --c-on-accent:      #1A1538;

  /* ── Typography (existing fonts, codified) ───────────────────────── */
  --f-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* ── Spacing scale (4px base) ────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ── Radius + elevation ──────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 999px;
  --e-1:    0 1px 2px rgba(15, 23, 42, .06);
  --e-2:    0 8px 22px -14px rgba(10, 31, 74, .45);
  --e-3:    0 24px 48px -28px rgba(3, 16, 44, .55);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --t-fast:  120ms;
  --t-base:  220ms;
  --t-slow:  380ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ── Dark-mode-friendly muted (used by empty/error partials) ───────── */
[data-state-empty] {
  border: 1px dashed var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  border-radius: var(--r-md);
  padding: var(--s-8) var(--s-6);
  text-align: center;
}
[data-state-empty] svg {
  width: 40px; height: 40px; opacity: .35; margin-bottom: var(--s-3);
}
[data-state-empty] p { margin: 0; font-size: .95rem; }
[data-state-empty] .empty-hint {
  margin-top: var(--s-2); font-size: .82rem; color: var(--c-ink-3);
}

[data-state-error] {
  border: 1px solid var(--c-danger);
  background: var(--c-danger-50);
  color: #7F1D1D;
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: flex-start; gap: var(--s-3);
}
[data-state-error] svg {
  width: 22px; height: 22px; flex: 0 0 22px; color: var(--c-danger);
}
[data-state-error] strong { display: block; margin-bottom: var(--s-1); }
[data-state-error] p { margin: 0; font-size: .9rem; line-height: 1.45; }

/* Utility shims for templates migrating off inline `style=""` strings.
 * Add MORE here as Phase-2 polish removes inline declarations. */
.c-text-muted   { color: var(--c-ink-3); }
.c-text-strong  { color: var(--c-ink); }
.c-text-danger  { color: var(--c-danger); }
.c-text-success { color: var(--c-success); }
.c-bg-surface-2 { background: var(--c-surface-2); }
.c-bg-primary-50{ background: var(--c-primary-50); }
.c-border       { border: 1px solid var(--c-border); }
.c-border-strong{ border: 1px solid var(--c-border-strong); }
.c-radius-md    { border-radius: var(--r-md); }
.c-shadow-1     { box-shadow: var(--e-1); }
.c-shadow-2     { box-shadow: var(--e-2); }