/* ===================================================================
   Payizi Design Tokens v1
   Single canonical source of truth for the web-v3 visual system.

   Accent is a deliberate highlight — not a substitute for hierarchy.
   Premium feel comes from spacing, hierarchy, border discipline,
   surface contrast, restrained typography, and state clarity.
   =================================================================== */

:root {
  /* ── Surfaces ── */
  --color-surface:        #ffffff;
  --color-surface-raised: #fefefe;       /* subtle lift over page bg */
  --color-surface-muted:  #f8f9fa;

  /* ── Borders ── */
  --color-border:         #e0e0e0;
  --color-border-strong:  #dee2e6;

  /* ── Accent (highlight, not hierarchy) ── */
  --color-accent:         #6366f1;
  --color-accent-hover:   #4f46e5;

  /* ── Text ── */
  --color-text-primary:   #212529;
  --color-text-secondary: #6c757d;
  --color-text-tertiary:  #666666;

  /* ── Semantic ── */
  --color-danger:         #b91c1c;
  --color-danger-bg:      #fef2f2;
  --color-success:        #067647;
  --color-success-bg:     #ecfdf3;
  --color-warning:        #b54708;
  --color-warning-bg:     #fffbeb;

  /* ── Status badges ── */
  --color-status-pending-bg:    #fef3c7;
  --color-status-pending-fg:    #92400e;
  --color-status-processing-bg: #dbeafe;
  --color-status-processing-fg: #1e40af;
  --color-status-completed-bg:  #d1fae5;
  --color-status-completed-fg:  #065f46;
  --color-status-failed-bg:     #fee2e2;
  --color-status-failed-fg:     #991b1b;
  --color-status-cancelled-bg:  #f3f4f6;
  --color-status-cancelled-fg:  #6b7280;

  /* ── Spacing scale ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ── Typography ── */
  --font-family-primary: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --text-overline:       10px;
  --text-caption:        11px;
  --text-label:          12px;
  --text-body:           14px;
  --text-body-lg:        16px;
  --text-section-title:  18px;
  --text-heading:        20px;
  --text-page-title:     24px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --transition-fast: all 120ms ease;
  --transition-base: all 200ms ease;

  /* ── Focus & selection ── */
  --color-focus-ring:       rgba(99, 102, 241, 0.3);
  --color-accent-subtle:    rgba(99, 102, 241, 0.06);

  /* ── Step geometry ── */
  --step-max-width-form:    520px;
  --step-max-width-review:  640px;

  /* ── Card geometry ── */
  --card-compact-height:    72px;
}

/* ── Dark mode overrides ──
   Only color + shadow tokens change; spacing, radius, and type stay the same.
   Compatible with future explicit light/dark/system toggle support. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface:        #1a1a2e;
    --color-surface-raised: #232340;
    --color-surface-muted:  #16213e;

    --color-border:         #2d2d4a;
    --color-border-strong:  #3a3a5c;

    --color-accent:         #818cf8;
    --color-accent-hover:   #a5b4fc;
    --color-focus-ring:     rgba(129, 140, 248, 0.35);
    --color-accent-subtle:  rgba(129, 140, 248, 0.08);

    --color-text-primary:   #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-tertiary:  #64748b;

    --color-danger:         #fca5a5;
    --color-danger-bg:      rgba(185, 28, 28, 0.15);
    --color-success:        #6ee7b7;
    --color-success-bg:     rgba(6, 118, 71, 0.15);
    --color-warning:        #fbbf24;
    --color-warning-bg:     rgba(181, 71, 8, 0.15);

    --color-status-pending-bg:    rgba(254, 243, 199, 0.12);
    --color-status-pending-fg:    #fcd34d;
    --color-status-processing-bg: rgba(219, 234, 254, 0.12);
    --color-status-processing-fg: #93c5fd;
    --color-status-completed-bg:  rgba(209, 250, 229, 0.12);
    --color-status-completed-fg:  #6ee7b7;
    --color-status-failed-bg:     rgba(254, 226, 226, 0.12);
    --color-status-failed-fg:     #fca5a5;
    --color-status-cancelled-bg:  rgba(243, 244, 246, 0.08);
    --color-status-cancelled-fg:  #9ca3af;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}