:root {
  /* ── Color Palette ── */
  --color-primary:       #1e3a5f;
  --color-primary-light: #2a4f7f;
  --color-primary-dark:  #0f2640;
  --color-accent:        #3b82f6;
  --color-accent-hover:  #2563eb;

  --color-bg:            #f8fafc;
  --color-bg-panel:      #ffffff;
  --color-bg-input:      #ffffff;
  --color-bg-header:     #1e3a5f;
  --color-bg-tab:        #e2e8f0;
  --color-bg-tab-active: #ffffff;
  --color-bg-result:     #f0f9ff;

  --color-text:          #1e293b;
  --color-text-muted:    #64748b;
  --color-text-inverse:  #f8fafc;
  --color-text-label:    #475569;

  --color-border:        #cbd5e1;
  --color-border-focus:  #3b82f6;

  --color-success:       #22c55e;
  --color-success-bg:    #f0fdf4;
  --color-warning:       #f59e0b;
  --color-warning-bg:    #fffbeb;
  --color-error:         #ef4444;
  --color-error-bg:      #fef2f2;
  --color-info:          #3b82f6;
  --color-info-bg:       #eff6ff;

  /* ── Typography ── */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height: 1.5;

  /* ── Spacing ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* ── Layout ── */
  --header-height: 3.5rem;
  --tab-bar-height: 2.75rem;
  --max-content-width: 960px;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #0f172a;
    --color-bg-panel:      #1e293b;
    --color-bg-input:      #1e293b;
    --color-bg-header:     #1e293b;
    --color-bg-tab:        #1e293b;
    --color-bg-tab-active: #334155;
    --color-bg-result:     #1e293b;

    --color-text:          #e2e8f0;
    --color-text-muted:    #94a3b8;
    --color-text-inverse:  #f8fafc;
    --color-text-label:    #94a3b8;

    --color-border:        #334155;
    --color-border-focus:  #60a5fa;

    --color-success-bg:    #052e16;
    --color-warning-bg:    #451a03;
    --color-error-bg:      #450a0a;
    --color-info-bg:       #172554;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4);
  }
}

[data-theme="dark"] {
  --color-bg:            #0f172a;
  --color-bg-panel:      #1e293b;
  --color-bg-input:      #1e293b;
  --color-bg-header:     #1e293b;
  --color-bg-tab:        #1e293b;
  --color-bg-tab-active: #334155;
  --color-bg-result:     #1e293b;

  --color-text:          #e2e8f0;
  --color-text-muted:    #94a3b8;
  --color-text-inverse:  #f8fafc;
  --color-text-label:    #94a3b8;

  --color-border:        #334155;
  --color-border-focus:  #60a5fa;

  --color-success-bg:    #052e16;
  --color-warning-bg:    #451a03;
  --color-error-bg:      #450a0a;
  --color-info-bg:       #172554;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4);
}