/* static/css/base.css */

/* 1. THEME VARIABLES */
:root {
  /* Colors */
  --color-primary: #F2994A;
  --color-accent: #6E7A5A;

  /* Light Mode Palette (Default) */
  --color-background: #FCFBF8;
  --color-text-primary: #2d3748;
  --color-text-secondary: #61615F;
  --color-surface: #FFFFFF;
  --color-border: #E0E0E0;

  /* Fonts */
  --font-display: "Montserrat", sans-serif;

  /* Border Radius */
  --border-radius-default: 0.5rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 1rem;

  /* Semantic Colors (Info / Success) */
  --color-info: #3B82F6; /* blue-500 */
  --color-info-light: rgba(59, 130, 246, 0.1);
  --color-success: #16A34A; /* green-600 */
  --color-success-light: rgba(22, 163, 74, 0.1);

  /* --- NEW: Warning & Error (Extracted from Design) --- */
  --color-warning: #92400e;       /* yellow-800 */
  --color-warning-light: #fef3c7; /* yellow-100 */
  --color-error: #b91c1c;         /* red-700 */
  --color-error-light: #fee2e2;   /* red-100 */
}

/* Dark Mode Palette */
.dark {
  --color-background: #2C2C2C;
  --color-text-primary: #E0E0E0;
  --color-text-secondary: #a0aec0;
  --color-surface: #383838;
  --color-border: #555555;
  --color-accent-dark: #A8D5A8;

  --color-info: #60A5FA; /* blue-400 */
  --color-info-light: rgba(96, 165, 250, 0.15);
  --color-success: #4ADE80; /* green-400 */
  --color-success-light: rgba(74, 222, 128, 0.15);

  /* --- NEW: Warning & Error (Dark Mode) --- */
  --color-warning: #fbbf24;       /* yellow-400 */
  --color-warning-light: rgba(245, 158, 11, 0.2);
  --color-error: #f87171;         /* red-400 */
  --color-error-light: rgba(239, 68, 68, 0.2);
}

/* 2. GLOBAL RESETS & BASE STYLES */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-display);
  background-color: var(--color-background);
  color: var(--color-text-primary); /* UPDATED from --color-text */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-accent);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--color-accent-dark);
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Default size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for font variations */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}