/* Light Theme - Tap Macro */
:root {
  /* Primary Colors */
  --primary: #845309;
  --primary-foreground: #ffffff;

  /* Secondary Colors */
  --secondary: #e4c090;
  --secondary-foreground: #57534e;

  /* Accent Colors */
  --accent: #f2daba;
  --accent-foreground: #57534e;

  /* Base Colors */
  --background: #fdfbf7;
  --foreground: #443833;

  /* Card Colors */
  --card: #f8f4ee;
  --card-foreground: #443833;

  /* Popover Colors */
  --popover: #f8f4ee;
  --popover-foreground: #443833;

  /* Border Colors */
  --border: #e4c090;
  --input: #ffffff;

  /* Ring Colors */
  --ring: #845309;

  /* Muted Colors */
  --muted: #e4c090;
  --muted-foreground: #78716c;

  /* Destructive Colors */
  --destructive: #dc2626;
  --destructive-foreground: #fef2f2;

  /* Success Colors */
  --success: #059669;
  --success-foreground: #f0fdf4;

  /* Warning Colors */
  --warning: #d97706;
  --warning-foreground: #fffbeb;

  /* Info Colors */
  --info: #2563eb;
  --info-foreground: #eff6ff;

  /* Additional Colors for Components */
  --bg-card: var(--card);
  --bg-secondary: var(--accent);
  --bg-input: var(--input);
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --border-radius: 8px;

  /* Vertical compression: spacing levers (tune here to adjust density globally) */
  --space-card: 1.25rem;
  --space-content: 1.5rem;
  --space-form-group: 0.75rem;
  --space-section: 1.25rem;
  --space-block: 0.75rem;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --bg-hover: #e4c090;
  --surface-card-header: var(--bg-secondary);
  
  /* Additional variables needed for glossary mode */
  --bg-tertiary: #f0f0f0;
  --accent-color: var(--primary);
  --accent-hover: #713f12;
  --success-color: #059669;
  --border-color: var(--border);
}

/* Light Theme Specific Styles */
[data-theme='light'] {
  background-color: var(--background);
  color: var(--foreground);
}

[data-theme='light'] .card {
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--card-foreground);
}

[data-theme='light'] .btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

[data-theme='light'] .btn-primary:hover {
  background-color: #713f12;
  border-color: #713f12;
}

[data-theme='light'] .btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--secondary);
}

[data-theme='light'] .btn-secondary:hover {
  background-color: #d4b17a;
  border-color: #d4b17a;
}

[data-theme='light'] .input {
  background-color: var(--input);
  border: 1px solid var(--border);
  color: var(--foreground);
}

[data-theme='light'] .input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(132, 83, 9, 0.2);
}

[data-theme='light'] .sidebar {
  background-color: var(--card);
  border-right: 1px solid var(--border);
}

[data-theme='light'] .header {
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
}

[data-theme='light'] .material-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

[data-theme='light'] .material-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(132, 83, 9, 0.15);
}

[data-theme='light'] .calculator-result {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border: 1px solid var(--border);
}

[data-theme='light'] .theme-toggle {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}

[data-theme='light'] .theme-toggle:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}