/**
 * GawangPinas Auth Portal - Design Tokens
 * Conforms to BRAND-KIT.md, Taste Skill v2, and WCAG 2.2 Level AA Contrast.
 */

:root {
  /* Brand Accent Colors */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e3a8a;
  --color-primary-light: #eff6ff;
  --color-primary-border: #bfdbfe;

  /* Neutral Light Palette */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f5f9;
  --color-surface-hover: #f8fafc;
  --color-border: #cbd5e1;
  --color-border-strong: #94a3b8; /* Meets 3:1 contrast on white */
  --color-border-input: #94a3b8;

  /* Typography Colors - WCAG 2.2 AA Verified */
  --color-text: #0f172a;          /* 16.1:1 AAA on #fff */
  --color-text-secondary: #334155; /* 9.6:1 AAA on #fff */
  --color-text-muted: #475569;     /* 7.0:1 AAA on #fff */
  --color-text-faint: #64748b;     /* 4.6:1 AA on #fff */

  /* Semantic Feedback Colors - AA Tested on Light Backgrounds */
  --color-success: #059669;
  --color-success-bg: #dcfce7;
  --color-success-border: #86efac;
  --color-success-text: #14532d; /* 8.2:1 AAA on #dcfce7 */

  --color-danger: #e11d48;
  --color-danger-bg: #ffe4e6;
  --color-danger-border: #fca5a5;
  --color-danger-text: #9f1239; /* 7.3:1 AAA on #ffe4e6 */

  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fcd34d;
  --color-warning-text: #78350f; /* 8.4:1 AAA on #fef3c7 */

  /* Strict Anti-Slop Radius Ladder */
  --radius-xs: 4px;   /* Checkboxes, micro-tags */
  --radius-sm: 6px;   /* Text inputs, selects */
  --radius-md: 8px;   /* Primary & secondary buttons */
  --radius-lg: 12px;  /* Main card container */
  --radius-full: 9999px; /* Circular icons/dots only */

  /* Touch Target Minimum (WCAG 2.2 2.5.8) */
  --touch-target-min: 44px;

  /* Focus Indicator Tokens (WCAG 2.2 2.4.11 & 2.4.13) */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline-color: #2563eb;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Natural Ambient Shadows - Zero Colored Halos */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);

  /* Micro-transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
}

/* Dark Mode Tokens - High Contrast AA/AAA */
[data-theme="dark"] {
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-primary-active: #1d4ed8;
  --color-primary-light: rgba(59, 130, 246, 0.16);
  --color-primary-border: rgba(59, 130, 246, 0.4);

  --color-bg: #090d16;
  --color-surface: #0f172a;
  --color-surface-subtle: #162036;
  --color-surface-hover: #1e293b;
  --color-border: #334155;
  --color-border-strong: #64748b;
  --color-border-input: #64748b;

  --color-text: #f8fafc;          /* 17.5:1 AAA on #0f172a */
  --color-text-secondary: #e2e8f0; /* 13.5:1 AAA on #0f172a */
  --color-text-muted: #cbd5e1;     /* 10.5:1 AAA on #0f172a */
  --color-text-faint: #94a3b8;     /* 5.6:1 AA on #0f172a */

  --color-success: #34d399;
  --color-success-bg: rgba(5, 150, 105, 0.2);
  --color-success-border: rgba(52, 211, 153, 0.4);
  --color-success-text: #6ee7b7;

  --color-danger: #fb7185;
  --color-danger-bg: rgba(225, 29, 72, 0.2);
  --color-danger-border: rgba(251, 113, 133, 0.4);
  --color-danger-text: #fca5a5;

  --color-warning: #fbbf24;
  --color-warning-bg: rgba(217, 119, 6, 0.2);
  --color-warning-border: rgba(251, 191, 36, 0.4);
  --color-warning-text: #fde68a;

  --focus-outline-color: #60a5fa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}