/* ═══════════════════════════════════════════════════════════
   I'M HUNGRY — Design System
   Premium dark-mode household food management system
   Warm earth tones inspired by Ghanaian cuisine
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Brand Colors — Warm Earth Palette */
  --gold-50: #FFF9E6;
  --gold-100: #FFF0BF;
  --gold-200: #FFE080;
  --gold-300: #FFD040;
  --gold-400: #FFC107;
  --gold-500: #E6A800;
  --gold-600: #CC9200;

  --green-50: #E8F5E9;
  --green-100: #C8E6C9;
  --green-200: #A5D6A7;
  --green-300: #66BB6A;
  --green-400: #43A047;
  --green-500: #2E7D32;
  --green-600: #1B5E20;

  --brown-50: #EFEBE9;
  --brown-100: #D7CCC8;
  --brown-200: #BCAAA4;
  --brown-300: #A1887F;
  --brown-400: #8D6E63;
  --brown-500: #6D4C41;
  --brown-600: #4E342E;

  --red-400: #EF5350;
  --red-500: #E53935;
  --red-600: #C62828;

  --amber-400: #FFA726;
  --amber-500: #FF9800;

  --teal-400: #26A69A;
  --teal-500: #009688;

  /* Surface Colors — Deep Dark */
  --bg-primary: #0D0D0F;
  --bg-secondary: #141418;
  --bg-elevated: #22222A;
  --bg-card: #282832;
  --bg-card-hover: #32323C;
  --bg-input: #1A1A22;
  --bg-modal: rgba(0, 0, 0, 0.85);

  /* Glass Effect */
  --glass-bg: rgba(40, 40, 50, 0.65);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hover: rgba(255, 255, 255, 0.20);
  --glass-blur: 24px;

  /* Text Colors */
  --text-primary: #F5F5F7;
  --text-secondary: #A0A0B0;
  --text-tertiary: #6B6B7B;
  --brand-text: var(--brand-primary, #FFC107);
  --text-accent: var(--brand-text);
  --text-on-accent: var(--brand-on-primary, #0D0D0F);

  /* Semantic Colors */
  --success: var(--green-400);
  --success-bg: rgba(67, 160, 71, 0.12);
  --warning: var(--amber-400);
  --warning-bg: rgba(255, 167, 38, 0.12);
  --danger: var(--red-400);
  --danger-bg: rgba(239, 83, 80, 0.12);
  --info: var(--teal-400);
  --info-bg: rgba(38, 166, 154, 0.12);

  /* Budget Colors */
  --budget-general: var(--brand-text);
  --budget-fufu: var(--brown-400);
  --budget-discretionary: var(--teal-400);

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(255, 193, 7, 0.15);
  --shadow-glow-strong: 0 0 40px rgba(255, 193, 7, 0.25);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Layout */
  --nav-height: 72px;
  --sidebar-width: 100px;
  --sidebar-width-expanded: 260px;
  --max-width-mobile: 480px;
  --max-width: 1440px;
  --fab-size: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── COLOR SCHEMES ── */
:root[data-color="gold"] {
  --brand-primary: #FFC107;
  --brand-on-primary: #0D0D0F;
}
:root[data-color="platinum"] {
  --brand-primary: #D1D1DF;
  --brand-on-primary: #0D0D0F;
}
:root[data-color="diamond"] {
  --brand-primary: #00E5FF;
  --brand-on-primary: #0D0D0F;
}
:root[data-color="silver"] {
  --brand-primary: #A8B2C1;
  --brand-on-primary: #0D0D0F;
}
:root[data-color="bronze"] {
  --brand-primary: #D68A59;
  --brand-on-primary: #0D0D0F;
}
:root[data-color="emerald"] {
  --brand-primary: #2ECC71;
  --brand-on-primary: #0D0D0F;
}

:root[data-theme="light"] {
  --bg-primary: #F8F9FA;
  --bg-secondary: #F1F3F5;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8F9FA;
  --bg-input: #FFFFFF;
  --bg-modal: rgba(255, 255, 255, 0.9);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.15);

  --text-primary: #111418;
  --text-secondary: #343A40;
  --text-tertiary: #495057;
  --brand-text: color-mix(in srgb, var(--brand-primary) 65%, #000);
  --text-accent: var(--brand-text);

  --success-bg: rgba(67, 160, 71, 0.15);
  --warning-bg: rgba(255, 167, 38, 0.15);
  --danger-bg: rgba(239, 83, 80, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 20px color-mix(in srgb, var(--brand-primary) 15%, transparent);
  --shadow-glow-strong: 0 0 40px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

body.high-contrast {
  --text-secondary: var(--text-primary);
  --text-tertiary: var(--text-primary);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-bg: var(--bg-card);
}
body.high-contrast[data-theme="light"] {
  --text-secondary: var(--text-primary);
  --text-tertiary: var(--text-primary);
  --glass-border: rgba(0, 0, 0, 0.4);
  --brand-text: color-mix(in srgb, var(--brand-primary) 85%, #000);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: 500; }

.text-accent { color: var(--text-accent); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

/* ── Utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.15); }
  50% { box-shadow: 0 0 30px rgba(255, 193, 7, 0.3); }
}

.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out); }
.animate-fade-in-up { animation: fadeInUp var(--duration-slow) var(--ease-out); }
.animate-slide-in-right { animation: slideInRight var(--duration-slow) var(--ease-out); }
.animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-spring); }

/* Staggered animation helper */
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-card);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ── Background Gradient ── */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 15% 0%, rgba(255, 193, 7, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(141, 110, 99, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255, 167, 38, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

:root[data-theme="light"] body::before {
  background: 
    radial-gradient(circle at 15% 0%, rgba(255, 193, 7, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(141, 110, 99, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255, 167, 38, 0.06) 0%, transparent 50%);
}