/* ============================================================
   theme.css — design tokens only.
   Edit this file to recolor / re-skin the entire portal.
   Component styles live in portal.css; they only reference tokens.
   ============================================================ */

/* Default = dark. To make light the default, swap the order of the two
   blocks below (whichever appears first in :root wins for unset attrs). */

:root,
[data-theme="dark"] {
  /* Surfaces */
  --bg:           #0b0d12;
  --bg-elevated:  #11141b;
  --surface:      #161a23;
  --surface-2:    #1c2230;
  --surface-3:    #232a3a;

  /* Foreground */
  --fg:           #e5e7eb;
  --fg-strong:    #f9fafb;
  --fg-muted:     #9ca3af;
  --fg-subtle:    #6b7280;

  /* Borders */
  --border:        #262b35;
  --border-strong: #374151;
  --border-focus:  #6366f1;

  /* Brand / accent */
  --accent:       #6366f1;
  --accent-hover: #818cf8;
  --accent-fg:    #ffffff;
  --accent-soft:  rgba(99, 102, 241, 0.15);

  /* Status */
  --ok:        #34d399;
  --ok-bg:     rgba(52, 211, 153, 0.10);
  --ok-border: rgba(52, 211, 153, 0.35);

  --err:        #f87171;
  --err-bg:     rgba(248, 113, 113, 0.10);
  --err-border: rgba(248, 113, 113, 0.40);

  --warn:        #fbbf24;
  --warn-bg:     rgba(251, 191, 36, 0.10);
  --warn-border: rgba(251, 191, 36, 0.40);

  --info:        #60a5fa;
  --info-bg:     rgba(96, 165, 250, 0.10);
  --info-border: rgba(96, 165, 250, 0.40);

  /* Shadows (tuned for dark) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* Legacy aliases — kept so existing templates and inline styles
     that reference --card / --muted continue to read sensible values. */
  --card:  var(--surface);
  --muted: var(--fg-muted);

  /* Geometry */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 2rem;

  --layout-max: 1100px;
}

[data-theme="light"] {
  --bg:           #f7f7f5;
  --bg-elevated:  #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f5f4ef;
  --surface-3:    #ecebe4;

  --fg:           #1f2937;
  --fg-strong:    #111827;
  --fg-muted:     #6b7280;
  --fg-subtle:    #9ca3af;

  --border:        #e5e3dc;
  --border-strong: #d1d5db;
  --border-focus:  #2f5fad;

  --accent:       #2f5fad;
  --accent-hover: #1f4789;
  --accent-fg:    #ffffff;
  --accent-soft:  rgba(47, 95, 173, 0.10);

  --ok:        #1e7a3a;
  --ok-bg:     #e7f5eb;
  --ok-border: #b8e0c1;

  --err:        #b3261e;
  --err-bg:     #fdecea;
  --err-border: #f5c2c0;

  --warn:        #b45309;
  --warn-bg:     #fff8e1;
  --warn-border: #f0c040;

  --info:        #1e40af;
  --info-bg:     #eef2ff;
  --info-border: #c7d2fe;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.10);

  --card:  var(--surface);
  --muted: var(--fg-muted);
}