/* tokens.css — design tokens aligned with legacy theme.css colors. */

:root {
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --font-mono: "SF Mono", "Consolas", "Monaco", monospace;
  --text-size-base: 14px;
  --text-size-sm: 12px;
  --text-size-lg: 16px;
  --text-size-xl: 20px;
  --text-size-xxl: 28px;
  --line-base: 1.5;

  /* Brand (legacy-aligned) */
  --color-primary: #0a6e5c;
  --color-primary-hover: #084d40;
  --color-primary-light: #e6f5f1;
  --color-accent: #2196a6;

  /* Backgrounds (legacy-aligned) */
  --color-bg: #f4f6f9;
  --color-bg-raised: #ffffff;
  --color-bg-subtle: #f8fafb;
  --color-bg-hover: #f1f5f9;
  --color-border: #eef1f4;
  --color-border-strong: #d1d5db;
  --color-text: #1a2332;
  --color-text-muted: #5a6a7a;
  --color-text-subtle: #94a3b8;

  /* Section headers (stronger tint than --primary-light for visibility) */
  --section-header-bg: #c5e8df;

  /* Header (green bar, shared with landing) */
  --header-bg: #0a6e5c;
  --header-bg-dark: #084d40;

  /* Status */
  --status-green: #059669;
  --status-yellow: #d97706;
  --status-orange: #e67e22;
  --status-red: #dc2626;
  --status-grey: #95a5a6;
  --status-blue: #2563eb;

  /* Chart palette (trends line/point colors when no vocab color is set) */
  --chart-color-1: #0a6e5c;
  --chart-color-2: #e07b00;
  --chart-color-3: #3498db;
  --chart-color-4: #e74c3c;
  --chart-color-5: #9b59b6;
  --error: #dc2626;
  --warning: #d97706;
  --success: #059669;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* Modal backdrop dim (was previously undefined — review-wizard.css
     references `var(--overlay)` for .rw-overlay background). Same dim
     for light + dark; explicit override per theme below if needed. */
  --overlay: rgba(15, 23, 42, 0.6);

  /* Header */
  --header-height: 64px;
  --tab-bar-height: 56px;
  --content-max: 1100px;

  /* ─── Legacy variable aliases ───────────────────────────────────
     Re-publish legacy theme.css names so verbatim-ported CSS chunks
     (e.g. .dash-tabs / .dash-tab) resolve without rewriting them. */
  --primary:        var(--color-primary);
  --primary-dark:   var(--color-primary-hover);
  --primary-light:  var(--color-primary-light);
  --accent:         var(--color-accent);
  --bg-body:        var(--color-bg);
  --bg-surface:     var(--color-bg-raised);
  --bg-subtle:      var(--color-bg-subtle);
  --bg-hover:       var(--color-bg-hover);
  --text:           var(--color-text);
  --text-light:     var(--color-text-muted);
  --text-inverted:  #ffffff;
  --border:         var(--color-border);
  --border-strong:  var(--color-border-strong);
  --white:          var(--color-bg-raised);
  --gray-50:        var(--color-bg-subtle);
  --gray-100:       var(--color-border);

  /* Propagate theme to native UA chrome (date/time pickers, select arrows,
     scrollbars, autofill). Inherited; overridden by data-theme blocks below. */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-primary: #34d399;
    --color-primary-hover: #6ee7b7;
    --color-primary-light: #064e3b;
    --section-header-bg: #0a3d2f;
    --color-accent: #67e8f9;

    --color-bg: #0f172a;
    --color-bg-raised: #1e293b;
    --color-bg-subtle: #1a2332;
    --color-bg-hover: #334155;
    --color-border: #334155;
    --color-border-strong: #475569;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;

    --header-bg: #0a6e5c;
    --header-bg-dark: #084d40;

    --status-green: #34d399;
    --status-yellow: #fbbf24;
    --status-red: #f87171;
    --status-blue: #60a5fa;
    --error: #f87171;
    --warning: #fbbf24;
    --success: #34d399;
  }
}

/* Explicit theme override via data-theme attribute on <html> */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #34d399;
  --color-primary-hover: #6ee7b7;
  --color-primary-light: #064e3b;
  --section-header-bg: #0a3d2f;
  --color-accent: #67e8f9;

  --color-bg: #0f172a;
  --color-bg-raised: #1e293b;
  --color-bg-subtle: #1a2332;
  --color-bg-hover: #334155;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;

  --header-bg: #0a6e5c;
  --header-bg-dark: #084d40;

  --status-green: #34d399;
  --status-yellow: #fbbf24;
  --status-red: #f87171;
  --status-blue: #60a5fa;
  --error: #f87171;
  --warning: #fbbf24;
  --success: #34d399;
}
html[data-theme="light"] {
  color-scheme: light;

  --color-primary: #0a6e5c;
  --color-primary-hover: #084d40;
  --color-primary-light: #e6f5f1;
  --section-header-bg: #c5e8df;
  --color-accent: #2196a6;

  --color-bg: #f4f6f9;
  --color-bg-raised: #ffffff;
  --color-bg-subtle: #f8fafb;
  --color-bg-hover: #f1f5f9;
  --color-border: #eef1f4;
  --color-border-strong: #d1d5db;
  --color-text: #1a2332;
  --color-text-muted: #5a6a7a;
  --color-text-subtle: #94a3b8;

  --header-bg: #0a6e5c;
  --header-bg-dark: #084d40;

  --status-green: #059669;
  --status-yellow: #d97706;
  --status-red: #dc2626;
  --status-blue: #2563eb;
  --error: #dc2626;
  --warning: #d97706;
  --success: #059669;
}

/* When the landing page is mounted, force the light page background
   so there is no dark bleed-through around the fixed navbar. Scoped
   via :has() which all modern browsers support. */
html:has(#landingPage) { background: #f4f6f9; }