/* Patapsco AI Platform - Main Styles & Theme Definitions */

/* Import self-hosted fonts */
@import url('/css/fonts.css');

/* ═══════════════════════════════════════════════════════
   Theme System — dim (default), dark, light
   "auto" resolves to dim or light via JS (prefers-color-scheme).
   ═══════════════════════════════════════════════════════ */

/* Dim theme (default): Slate-blue tint — original dark theme */
:root,
[data-theme="dim"] {
  color-scheme: dark;

  /* Font family - Jost (Futura alternative), self-hosted for offline use */
  --font-family: "Jost", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Static design tokens */
  --color-accent-primary: #6366f1;
  --color-accent-secondary: #8b5cf6;
  --color-accent-tertiary: #a78bfa;

  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Surfaces — slate-blue tint */
  --color-surface: #0f172a;
  --color-surface-elevated: #1e293b;
  --color-surface-muted: #334155;
  --color-border: #475569;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;

  /* Tag input */
  --color-tag-bg: #3b4559;
  --color-tag-hover: #4a5568;
  --color-tag-text: #f1f5f9;
  --color-tag-remove-bg: #5a6678;
  --color-tag-remove-color: #e2e8f0;
  --color-tag-remove-bg-hover: rgba(211, 148, 148, 0.4);
  --color-tag-remove-hover: #c77777;

  /* Source badge */
  --color-badge-source-bg: #4b5563;
  --color-badge-source-text: #ffffff;

  /* Terminal tokens */
  --color-terminal-bg: var(--color-surface-elevated);
  --color-terminal-fg: var(--color-text);
}

/* Dark theme: True OLED-friendly, neutral grays */
[data-theme="dark"] {
  color-scheme: dark;

  --color-surface: #0d0d0d;
  --color-surface-elevated: #1a1a1a;
  --color-surface-muted: #333333;
  --color-border: #404040;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;

  /* Tag input */
  --color-tag-bg: #333333;
  --color-tag-hover: #404040;
  --color-tag-text: #e2e8f0;
  --color-tag-remove-bg: #4a4a4a;
  --color-tag-remove-color: #e2e8f0;
  --color-tag-remove-bg-hover: rgba(211, 148, 148, 0.4);
  --color-tag-remove-hover: #c77777;

  /* Source badge */
  --color-badge-source-bg: #4b5563;
  --color-badge-source-text: #ffffff;
}

/* Light theme */
[data-theme="light"] {
  color-scheme: light;

  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;
  --color-surface-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-text-muted: #64748b;

  /* Tag input */
  --color-tag-bg: #e5e5e5;
  --color-tag-hover: #d3e2e2;
  --color-tag-text: #1e293b;
  --color-tag-remove-bg: #c9c9c9;
  --color-tag-remove-color: #555;
  --color-tag-remove-bg-hover: rgba(211, 148, 148, 0.3);
  --color-tag-remove-hover: #c77777;

  /* Source badge */
  --color-badge-source-bg: #374151;
  --color-badge-source-text: #ffffff;

  /* Terminal tokens - set to dimmer colors for light mode to make
  bright colors readable. */
  --color-terminal-bg: #1e293b;
  --color-terminal-fg: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════
   Global Base Styles
   ═══════════════════════════════════════════════════════ */

/* Global box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: var(--font-family);
}

/* Ensure form elements use the font and proper sizing */
input,
select,
textarea,
button {
  font-family: var(--font-family);
  box-sizing: border-box;
  max-width: 100%;
}

body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Global form styles */
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

label + input,
label + select,
label + textarea {
  margin-top: 0.5rem;
}