/**
 * IPMS Design Tokens
 * SPEC: SPEC-DESIGNSYS-001
 * Requirements: REQ-U-002 (Design Token System)
 *
 * Light mode only for Phase 1. Dark mode tokens to be added later.
 */

:root {
  /* Primary Colors */
  --color-primary: #2563eb;           /* blue-600 */
  --color-primary-focus: #1d4ed8;     /* blue-700 */

  /* Input Border Colors */
  --color-border-input: #9ca3af;      /* gray-400 - REQ-U-001 */
  --color-border-input-focus: #3b82f6; /* blue-500 */
  --color-border-error: #ef4444;      /* red-500 */

  /* Background Colors */
  --color-bg-input: #fff;
  --color-bg-input-disabled: #f3f4f6; /* gray-100 */

  /* Text Colors */
  --color-text-label: #374151;        /* gray-700 */
  --color-text-error: #ef4444;        /* red-500 */
  --color-text-placeholder: #9ca3af;  /* gray-400 */

  /* Spacing - Input Fields (REQ-U-001) */
  --spacing-input-x: 1rem;            /* px-4 = 16px */
  --spacing-input-y: 0.75rem;         /* py-3 = 12px */

  /* Spacing - Layout (REQ-U-004: Balanced Layout) */
  --spacing-page: 1rem;               /* Page content padding (p-4 = 16px) */
  --spacing-card: 1.25rem;            /* Card internal padding (p-5 = 20px) */
  --spacing-section: 1rem;            /* Vertical gap between sections (16px) */
  --spacing-grid: 1rem;               /* Grid gap between cards (16px) */
  --spacing-header: 1.25rem;          /* Header bottom margin (20px) */

  /* Focus Ring - REQ-S-001 */
  --ring-width: 2px;
  --ring-color: rgb(59 130 246 / 50%); /* blue-500 with opacity */

  /* Border Radius - REQ-U-003: rounded only (0.25rem), NO rounded-lg */
  --radius-input: 0.25rem;

  /* ── Sidebar Colors ── */
  --color-sidebar-bg: #1f2937;
  --color-sidebar-text: #f3f4f6;
  --color-sidebar-active: #2563eb;
  --color-sidebar-hover: #374151;
  --color-sidebar-border: #374151;

  /* ── Layout Spacing ── */
  --spacing-sidebar-expanded: 256px;
  --spacing-sidebar-collapsed: 64px;
  --spacing-drawer-width: 280px;
  --spacing-topbar-height: 56px;

  /* ── Transitions ── */
  --transition-sidebar: 200ms ease-in-out;

  /* ── Z-index Layers ── */
  --z-sidebar: 40;
  --z-drawer-overlay: 40;
  --z-drawer: 50;
  --z-hamburger: 50;

  /* ── Topbar ── */
  --color-topbar-bg: #fff;
  --color-topbar-text: #1f2937;
  --color-topbar-title: #111827;
  --color-topbar-icon: #374151;
  --color-topbar-hover: #f3f4f6;
  --color-topbar-border: #e5e7eb;
  --shadow-topbar: 0 1px 3px rgb(0 0 0 / 8%);

  /* ── Nav Items ── */
  --color-nav-text: #d1d5db;
  --color-nav-toggle: #9ca3af;

  /* ── Overlay ── */
  --color-overlay: rgb(0 0 0 / 50%);
  --shadow-toggle: 0 4px 6px -1px rgb(0 0 0 / 10%);

  /* ── Focus ── */
  --color-focus-outline: #fff;

  /* ── Success States ── */
  --color-success-light: #d1fae5;
  --color-success-medium: #a7f3d0;
  --color-success-border: #6ee7b7;

  /* ── Error States ── */
  --color-error-ring: rgb(239 68 68 / 30%);
  --color-error-ring-light: rgb(239 68 68 / 20%);
  --color-error-focus: #dc2626;
  --color-error-ring-focus: rgb(220 38 38 / 30%);
  --color-error-hover: rgb(239 68 68 / 10%);

  /* ── Edit Mode ── */
  --color-edit-bg: #eff6ff;
  --color-edit-border: #bfdbfe;

  /* ── Chip/Tag ── */
  --color-chip-bg: #dbeafe;
  --color-chip-border: #bfdbfe;
  --color-chip-hover: #bfdbfe;
  --shadow-focus-ring: 0 0 0 2px rgb(59 130 246 / 50%);

  /* ── Semantic Fields ── */
  --color-field-default: #4b5563;
  --color-field-default-dark: #9ca3af;
  --color-field-title: #111827;
  --color-field-title-dark: #fff;
  --color-field-amount: #374151;
  --color-field-amount-dark: #d1d5db;
  --color-field-name: #374151;
  --color-field-name-dark: #d1d5db;

  /* ── Ref Sources ── */
  --color-ref-office: #1e40af;
  --color-ref-office-dark: #93c5fd;
  --color-ref-firm: #065f46;
  --color-ref-firm-dark: #6ee7b7;
  --color-ref-client: #9a3412;
  --color-ref-client-dark: #fdba74;

  /* ── Button Variant Tokens ── */
  --btn-primary-bg: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-primary-text: #fff;
  --btn-primary-ring: rgb(37 99 235 / 50%);
  --btn-secondary-bg: #e5e7eb;
  --btn-secondary-hover: #d1d5db;
  --btn-secondary-text: #1f2937;
  --btn-secondary-ring: rgb(107 114 128 / 50%);
  --btn-danger-bg: #ef4444;
  --btn-danger-hover: #dc2626;
  --btn-danger-text: #fff;
  --btn-danger-ring: rgb(239 68 68 / 50%);
  --btn-ghost-hover: #f3f4f6;
  --btn-ghost-text: #4b5563;
  --btn-ghost-ring: rgb(107 114 128 / 50%);
  --btn-outline-border: #2563eb;
  --btn-outline-text: #2563eb;
  --btn-outline-hover: #eff6ff;
  --btn-outline-ring: rgb(37 99 235 / 50%);

  /* ── Button Size Tokens ── */
  --btn-sm-px: 0.75rem;
  --btn-sm-py: 0.375rem;
  --btn-sm-font: 0.875rem;
  --btn-md-px: 1rem;
  --btn-md-py: 0.5rem;
  --btn-md-font: 1rem;
  --btn-lg-px: 1.5rem;
  --btn-lg-py: 0.75rem;
  --btn-lg-font: 1.125rem;
}

/* Dark mode placeholder - to be implemented in Phase 2
@media (prefers-color-scheme: dark) {
  :root {
    --color-border-input: #6b7280;
    --color-bg-input: #1f2937;
    --color-bg-input-disabled: #374151;
    --color-text-label: #d1d5db;
  }
}
*/