/* ── IV Design Tokens ──────────────────────────────────────────────────
   Single source of truth. Override :root vars in a theme file to retheme.
   Colors: Tailwind v3 standard palette (gray + indigo accent).
   ─────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Backgrounds — Tailwind gray, dark theme ── */
  --iv-bg-deep:    #030712;   /* gray-950 — deepest chrome, invoice footer */
  --iv-bg-dark:    #111827;   /* gray-900 — table/dialog headers, section bands */
  --iv-bg-page:    #111827;   /* gray-900 — body / page canvas */
  --iv-bg-surface: #1f2937;   /* gray-800 — cards, inputs, modals, panels */
  --iv-bg-raised:  #374151;   /* gray-700 — tab pills, raised elements */
  --iv-bg-header:  #1f2937;   /* gray-800 — opaque section header bands */
  --iv-bg-row-a:   #1f2937;   /* gray-800 — striped table row A */
  --iv-bg-row-b:   #111827;   /* gray-900 — striped table row B */
  --iv-bg-hover:   #374151;   /* gray-700 — row hover / over state */

  /* ── Borders ── */
  --iv-border:               #374151;                /* gray-700 */
  --iv-border-frame:         rgba(255,255,255,0.08);  /* subtle data-row frames */
  --iv-border-accent:        rgba(99,102,241,0.3);    /* indigo-500/30 — modal/card */
  --iv-border-accent-strong: rgba(99,102,241,0.5);    /* indigo-500/50 — dialog */

  /* ── Text ── */
  --iv-text:             #f9fafb;   /* gray-50  — primary */
  --iv-text-muted:       #d1d5db;   /* gray-300 — secondary labels, tab links */
  --iv-text-link:        #818cf8;   /* indigo-400 — links in dark tables */
  --iv-text-meta:        #9ca3af;   /* gray-400 — meta info (AE, %, counts) */
  --iv-text-placeholder: #6b7280;   /* gray-500 */
  --iv-text-white:       #ffffff;

  /* ── Accent / Brand — Tailwind indigo ── */
  --iv-accent:        #6366f1;   /* indigo-500 */
  --iv-accent-hover:  #4f46e5;   /* indigo-600 */
  --iv-accent-light:  #818cf8;   /* indigo-400 */
  --iv-lavender:      #c7d2fe;   /* indigo-200 — jQuery UI widget text */

  /* ── Semantic ── */
  --iv-danger:             #ef4444;               /* red-500 */
  --iv-danger-glow:        rgba(239,68,68,0.25);
  --iv-focus-glow:         rgba(99,102,241,0.2);  /* indigo-500/20 */
  --iv-focus-glow-strong:  rgba(99,102,241,0.3);  /* indigo-500/30 */

  /* ── Typography ── */
  --iv-font-family: 'Segoe UI', Arial, sans-serif;
  --iv-font-xs:   0.7rem;
  --iv-font-sm:   0.75rem;
  --iv-font-ui:   0.85rem;
  --iv-font-base: 1rem;

  /* ── Spacing ── */
  --iv-space-1: 0.25rem;
  --iv-space-2: 0.5rem;
  --iv-space-3: 0.75rem;
  --iv-space-4: 1rem;

  /* ── Border radius ── */
  --iv-radius-sm: 2px;
  --iv-radius:    4px;
  --iv-radius-lg: 6px;

  /* ── Form layout ── */
  --iv-label-width: 10em;
}

/* ── Light mode — follows system/browser preference ────────────────────────
   All --iv-* references adapt automatically; no class changes needed.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    /* Backgrounds */
    --iv-bg-deep:    #f9fafb;   /* gray-50  — invoice footer bands */
    --iv-bg-dark:    #f3f4f6;   /* gray-100 — table/dialog headers, section bands */
    --iv-bg-page:    #ffffff;
    --iv-bg-surface: #ffffff;   /* cards, inputs, modals */
    --iv-bg-raised:  #f3f4f6;   /* gray-100 — tab pills, raised elements */
    --iv-bg-header:  #f9fafb;   /* gray-50  — opaque section header bands */
    --iv-bg-row-a:   #ffffff;
    --iv-bg-row-b:   #f9fafb;   /* gray-50 */
    --iv-bg-hover:   #e5e7eb;   /* gray-200 — distinct enough on both row colors */

    /* Borders */
    --iv-border:               #d1d5db;              /* gray-300 */
    --iv-border-frame:         rgba(0, 0, 0, 0.06);
    --iv-border-accent:        rgba(99, 102, 241, 0.25);
    --iv-border-accent-strong: rgba(99, 102, 241, 0.4);

    /* Text */
    --iv-text:             #111827;   /* gray-900 */
    --iv-text-muted:       #6b7280;   /* gray-500 */
    --iv-text-link:        #4f46e5;   /* indigo-600 — contrast on white */
    --iv-text-meta:        #9ca3af;   /* gray-400 — acceptable on both */
    --iv-text-placeholder: #9ca3af;   /* gray-400 */
    --iv-text-white:       #ffffff;   /* stays white — used on dark-bg elements */

    /* Accent — darker for white-background contrast */
    --iv-accent:        #4f46e5;   /* indigo-600 */
    --iv-accent-hover:  #4338ca;   /* indigo-700 */
    --iv-accent-light:  #6366f1;   /* indigo-500 */
    --iv-lavender:      #4f46e5;   /* indigo-600 — jQuery UI text on light bg */

    /* Semantic */
    --iv-focus-glow:         rgba(99, 102, 241, 0.15);
    --iv-focus-glow-strong:  rgba(99, 102, 241, 0.25);
    /* --iv-danger: red-500 has sufficient contrast on white; unchanged */
  }

  /* Badge text: darken for contrast on light backgrounds */
  .iv-badge-green  { color: #15803d; }   /* green-700  */
  .iv-badge-red    { color: #dc2626; }   /* red-600    */
  .iv-badge-orange { color: #c2410c; }   /* orange-700 */
  .iv-badge-yellow { color: #a16207; }   /* yellow-700 */
  .iv-badge-purple { color: #7c3aed; }   /* violet-600 */
}

/* ── Manual theme overrides (wire to <html data-theme="light|dark">) ────────
   Set document.documentElement.dataset.theme = 'light'|'dark' to override
   the system preference without a page reload.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --iv-bg-deep:    #f9fafb;
  --iv-bg-dark:    #f3f4f6;
  --iv-bg-page:    #ffffff;
  --iv-bg-surface: #ffffff;
  --iv-bg-raised:  #f3f4f6;
  --iv-bg-header:  #f9fafb;
  --iv-bg-row-a:   #ffffff;
  --iv-bg-row-b:   #f9fafb;
  --iv-bg-hover:   #e5e7eb;
  --iv-border:               #d1d5db;
  --iv-border-frame:         rgba(0, 0, 0, 0.06);
  --iv-border-accent:        rgba(99, 102, 241, 0.25);
  --iv-border-accent-strong: rgba(99, 102, 241, 0.4);
  --iv-text:             #111827;
  --iv-text-muted:       #6b7280;
  --iv-text-link:        #4f46e5;
  --iv-text-meta:        #9ca3af;
  --iv-text-placeholder: #9ca3af;
  --iv-text-white:       #ffffff;
  --iv-accent:        #4f46e5;
  --iv-accent-hover:  #4338ca;
  --iv-accent-light:  #6366f1;
  --iv-lavender:      #4f46e5;
  --iv-focus-glow:         rgba(99, 102, 241, 0.15);
  --iv-focus-glow-strong:  rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .iv-badge-green  { color: #15803d; }
[data-theme="light"] .iv-badge-red    { color: #dc2626; }
[data-theme="light"] .iv-badge-orange { color: #c2410c; }
[data-theme="light"] .iv-badge-yellow { color: #a16207; }
[data-theme="light"] .iv-badge-purple { color: #7c3aed; }

[data-theme="dark"] {
  --iv-bg-deep:    #030712;
  --iv-bg-dark:    #111827;
  --iv-bg-page:    #111827;
  --iv-bg-surface: #1f2937;
  --iv-bg-raised:  #374151;
  --iv-bg-header:  #1f2937;
  --iv-bg-row-a:   #1f2937;
  --iv-bg-row-b:   #111827;
  --iv-bg-hover:   #374151;
  --iv-border:               #374151;
  --iv-border-frame:         rgba(255, 255, 255, 0.08);
  --iv-border-accent:        rgba(99, 102, 241, 0.3);
  --iv-border-accent-strong: rgba(99, 102, 241, 0.5);
  --iv-text:             #f9fafb;
  --iv-text-muted:       #d1d5db;
  --iv-text-link:        #818cf8;
  --iv-text-meta:        #9ca3af;
  --iv-text-placeholder: #6b7280;
  --iv-text-white:       #ffffff;
  --iv-accent:        #6366f1;
  --iv-accent-hover:  #4f46e5;
  --iv-accent-light:  #818cf8;
  --iv-lavender:      #c7d2fe;
  --iv-focus-glow:         rgba(99, 102, 241, 0.2);
  --iv-focus-glow-strong:  rgba(99, 102, 241, 0.3);
}