/* ==========================================================================
   Editorial Audio Tools - Design System Specification
   Theme Tokens, Spatial Scale, Typography Hierarchy & Component Behavioral Rules
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

:root,
[data-theme="light"] {
  /* Light Mode (Default) */
  --bg-base: #FDFBF7;           /* Warm cream */
  --surface-panel: #F4F2EE;     /* Slightly darker cream for contrast */
  --surface-elevated: #FFFFFF;  /* Pure white for floating dialogs & cards */
  --border: #E5E2DC;            /* Soft structural lines */
  --border-focus: #57877A;      /* Sage Green focus */
  --text-primary: #2D2B2A;      /* Charcoal, avoiding harsh pure black */
  --text-muted: #6F6B68;        /* Deep taupe for secondary labels */

  /* Semantic Pastel Accents */
  --accent-primary: #57877A;    /* Muted Sage Green (Primary / Success) */
  --accent-warning: #D29E55;    /* Warm Ochre (Warning / Processing) */
  --accent-danger: #C47463;     /* Muted Terracotta (Danger / Destructive) */
  --accent-active: #8E9CA3;     /* Soft Slate Blue (Active Parameter) */
  --accent-sage: #57877A;       /* Sage Green */
  --accent-ochre: #D29E55;      /* Warm Ochre */
  --accent-terracotta: #C47463; /* Terracotta */
  --accent-slate: #8E9CA3;      /* Soft Slate Blue */
  --accent-mauve: #9E8E9C;      /* Dusty Mauve */
  --accent-steel: #5A8296;      /* Muted Steel Teal */
  --accent-amber: #C99757;      /* Muted Amber */
  --accent-olive: #748767;      /* Muted Olive */

  /* Cost Breakdown Visualizer Colors */
  --cost-material: #57877A;     /* Sage Green */
  --cost-machine: #8E9CA3;      /* Slate Blue */
  --cost-power: #D29E55;        /* Warm Ochre */
  --cost-labor: #9E8E9C;        /* Dusty Mauve */
  --cost-hardware: #5A8296;     /* Muted Steel Teal */
  --cost-risk: #C47463;         /* Terracotta */

  /* Spatial Scale */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;

  /* Corner Radii (Soft Rounding) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 24px;

  /* Typography Hierarchy */
  --font-serif: "Merriweather", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", ui-monospace, monospace;

  /* Transitions & Shadows */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] {
  /* Dark Mode */
  --bg-base: #1E1D1C;           /* Deep warm gray */
  --surface-panel: #2A2928;
  --surface-elevated: #353332;
  --border: #454341;
  --border-focus: #6da395;
  --text-primary: #EBE9E4;
  --text-muted: #969490;

  --accent-primary: #6da395;
  --accent-warning: #deb26b;
  --accent-danger: #d9806e;
  --accent-active: #9eacb3;
  --accent-sage: #6da395;
  --accent-ochre: #deb26b;
  --accent-terracotta: #d9806e;
  --accent-slate: #9eacb3;
  --accent-mauve: #b2a2b0;
  --accent-steel: #7aa1b5;
  --accent-amber: #dbaa6b;
  --accent-olive: #8da080;

  --cost-material: #6da395;
  --cost-machine: #9eacb3;
  --cost-power: #deb26b;
  --cost-labor: #b2a2b0;
  --cost-hardware: #7aa1b5;
  --cost-risk: #d9806e;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Base Styles */
html, body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

* {
  box-sizing: border-box;
}