@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

body {
    font-family: 'Outfit', sans-serif;
    /* Handled by tailwind classes */
}

/* Micro-animations */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

:root {
  --color-on-secondary-fixed: #271900;
  --color-secondary: #7b5800;
  --color-on-tertiary-container: #f7feff;
  --color-tertiary-fixed: #a7eefc;
  --color-on-surface: #241911;
  --color-surface-container: #ffeadd;
  --color-primary: #a03f28;
  --color-on-primary: #ffffff;
  --color-error-container: #ffdad6;
  --color-background: #fff8f5;
  --color-on-secondary-fixed-variant: #5d4200;
  --color-inverse-on-surface: #ffede3;
  --color-on-tertiary: #ffffff;
  --color-on-secondary-container: #6f4f00;
  --color-on-tertiary-fixed-variant: #004e59;
  --color-primary-container: #c0573e;
  --color-on-surface-variant: #56423d;
  --color-on-primary-fixed: #3d0700;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fff1e9;
  --color-surface-container-high: #fae4d6;
  --color-surface-bright: #fff8f5;
  --color-surface-variant: #f4ded0;
  --color-on-error: #ffffff;
  --color-surface-container-highest: #f4ded0;
  --color-primary-fixed-dim: #ffb4a3;
  --color-secondary-fixed: #ffdea6;
  --color-secondary-container: #ffbe30;
  --color-tertiary-fixed-dim: #8bd2df;
  --color-surface-tint: #a03f29;
  --color-tertiary: #106571;
  --color-primary-fixed: #ffdad2;
  --color-secondary-fixed-dim: #fcbc2c;
  --color-on-primary-container: #120100;
  --color-error: #ba1a1a;
  --color-on-background: #241911;
  --color-inverse-surface: #3b2e24;
  --color-on-primary-fixed-variant: #812914;
  --color-outline-variant: #ddc0ba;
  --color-inverse-primary: #ffb4a3;
  --color-surface: #fff8f5;
  --color-on-tertiary-fixed: #001f24;
  --color-on-secondary: #ffffff;
  --color-outline: #8a726c;
  --color-surface-dim: #ecd6c8;
  --color-on-error-container: #93000a;
  --color-tertiary-container: #347e8b;
}

.dark {
  --color-on-secondary-fixed: #271900;
  --color-secondary: #7b5800;
  --color-on-tertiary-container: #f7feff;
  --color-tertiary-fixed: #a7eefc;
  --color-on-surface: #e2e8f0;
  --color-surface-container: #0f172a;
  --color-primary: #a03f28;
  --color-on-primary: #ffffff;
  --color-error-container: #7f1d1d;
  --color-background: #020617;
  --color-on-secondary-fixed-variant: #5d4200;
  --color-inverse-on-surface: #020617;
  --color-on-tertiary: #ffffff;
  --color-on-secondary-container: #6f4f00;
  --color-on-tertiary-fixed-variant: #004e59;
  --color-primary-container: #c0573e;
  --color-on-surface-variant: #94a3b8;
  --color-on-primary-fixed: #3d0700;
  --color-surface-container-lowest: #020617;
  --color-surface-container-low: #0b141a;
  --color-surface-container-high: #1e293b;
  --color-surface-bright: #020617;
  --color-surface-variant: #1e293b;
  --color-on-error: #ffffff;
  --color-surface-container-highest: #334155;
  --color-primary-fixed-dim: #ffb4a3;
  --color-secondary-fixed: #ffdea6;
  --color-secondary-container: #ffbe30;
  --color-tertiary-fixed-dim: #8bd2df;
  --color-surface-tint: #020617;
  --color-tertiary: #106571;
  --color-primary-fixed: #ffdad2;
  --color-secondary-fixed-dim: #fcbc2c;
  --color-on-primary-container: #120100;
  --color-error: #ef4444;
  --color-on-background: #e2e8f0;
  --color-inverse-surface: #020617;
  --color-on-primary-fixed-variant: #812914;
  --color-outline-variant: #334155;
  --color-inverse-primary: #ffb4a3;
  --color-surface: #020617;
  --color-on-tertiary-fixed: #001f24;
  --color-on-secondary: #ffffff;
  --color-outline: #475569;
  --color-surface-dim: #020617;
  --color-on-error-container: #fef2f2;
  --color-tertiary-container: #347e8b;
}