:root {
  /* COLORS (Light Mode) */
  --color-primary: #000000;
  /* Black */
  --color-text: #000000;
  /* Black */
  --color-muted-text: #333333;
  /* Dark Grey */
  --color-accent: #6F4E37;
  /* CaramelAccent - Keeping for brand */
  /* Alineado con webapp (--screen-light-background / shell día) */
  --color-bg: #f7f7f7;
  --color-surface: #FFFFFF;
  --color-surface-2: #f0eeeb;
  --color-surface-3: #fafafa;
  --color-border: rgba(0, 0, 0, 0.1);
  /* Light Border */
  --color-success: #81C784;
  --color-error: #FF3B30;
  --color-warn: #FFB300;

  /* TYPOGRAPHY */
  --font-family-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* SPACING */
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-8: 64px;

  /* LAYOUT */
  --container-width: 1200px;
  --header-height: 70px;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --transition-speed: 0.3s;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* COLORS (Dark Mode) */
    --color-primary: #f8f4f0;
    --color-text: #f4f1ee;
    --color-muted-text: #c7c2bc;
    --color-accent: #c79b7a;
    --color-bg: #12100f;
    --color-surface: #171412;
    --color-surface-2: #201c19;
    --color-surface-3: #26221f;
    --color-border: rgba(255, 255, 255, 0.14);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  /* COLORS (Dark Mode Manual Override) */
  --color-primary: #f8f4f0;
  --color-text: #f4f1ee;
  --color-muted-text: #c7c2bc;
  --color-accent: #c79b7a;
  --color-bg: #12100f;
  --color-surface: #171412;
  --color-surface-2: #201c19;
  --color-surface-3: #26221f;
  --color-border: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

[data-theme="light"] {
  /* COLORS (Light Mode Manual Override) */
  --color-primary: #000000;
  --color-text: #000000;
  --color-muted-text: #333333;
  --color-accent: #6F4E37;
  --color-bg: #f7f7f7;
  --color-surface: #FFFFFF;
  --color-surface-2: #f0eeeb;
  --color-surface-3: #fafafa;
  --color-border: rgba(0, 0, 0, 0.1);
  color-scheme: light;
}