/* ============ TOKENS ============ */
:root {
  /* === Jawla Color Palette (from DESIGN.md) === */
  /* Surface Tones */
  --surface: #fff8f6;
  --surface-dim: #f0d4ce;
  --surface-bright: #fff8f6;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fff0ee;
  --surface-container: #ffe9e5;
  --surface-container-high: #fee2dc;
  --surface-container-highest: #f9dcd7;

  /* Text on Surfaces */
  --on-surface: #271815;
  --on-surface-variant: #5b403b;
  --inverse-surface: #3d2c29;
  --inverse-on-surface: #ffede9;
  --outline: #8f706a;
  --outline-variant: #e3beb7;

  /* Brand Colors */
  --surface-tint: #b5260d;
  --primary: #a51901;
  --on-primary: #ffffff;
  --primary-container: #c8341a;
  --on-primary-container: #ffe9e5;
  --inverse-primary: #ffb4a5;

  /* Secondary (Saffron Gold) */
  --secondary: #7c5800;
  --on-secondary: #ffffff;
  --secondary-container: #ffbe37;
  --on-secondary-container: #6f4e00;

  /* Tertiary */
  --tertiary: #00549b;
  --on-tertiary: #ffffff;
  --tertiary-container: #006cc5;
  --on-tertiary-container: #e6eeff;

  /* Error States */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Fixed Colors */
  --primary-fixed: #ffdad3;
  --primary-fixed-dim: #ffb4a5;
  --on-primary-fixed: #3e0400;
  --on-primary-fixed-variant: #8e1300;

  /* Secondary Fixed */
  --secondary-fixed: #ffdea8;
  --secondary-fixed-dim: #fcbb34;
  --on-secondary-fixed: #271900;
  --on-secondary-fixed-variant: #5e4200;

  /* Tertiary Fixed */
  --tertiary-fixed: #d4e3ff;
  --tertiary-fixed-dim: #a5c8ff;
  --on-tertiary-fixed: #001c3a;
  --on-tertiary-fixed-variant: #004785;

  /* Semantic Colors (for backward compatibility) */
  --bg: #fff8f6;
  --surface-pure: #FFFFFF;
  --accent: #E0A317;
  --accent-light: #D4A857;
  --ink: #221A12;
  --ink-soft: #6B5A4A;
  --ink-muted: #8a7f6a;
  --ink-dim: #5b5142;
  --border-color: #C9BFAC;
  --surface-dim-alt: #F5F0E8;
  --clay: #8B4E35;
  --disabled: #6b6357;
  --whatsapp-start: #25D366;
  --whatsapp-end: #128C7E;
  --charcoal: #1F1410;
  --paper: #fff8f6;
  --paper-dim: #F5F0E8;
  --line: #E5DDD3;

  /* === Shadows === */
  --shadow-soft: 0 4px 24px rgba(200, 52, 26, 0.08);
  --shadow-medium: 0 8px 32px rgba(200, 52, 26, 0.12);

  /* === Shape & Radii === */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-image: 20px;
  --border-warm: 1px solid #E5DDD3;

  /* === Legacy Tokens (kept for compatibility during transition) === */
  /* TODO: Remove after testing phase - these are being replaced by semantic tokens above */
  /*
  --chili: var(--primary);
  --mustard: var(--accent);
  --paper: var(--bg);
  --charcoal: #1F1410;
  --line: #E5DDD3;
  --clay: #8B4E35;
  --mustard-light: #D4A857;
  --paper-dim: #F5F0E8;
  */

  /* === Spacing === */
  --spacing-base: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
  --container-max: 600px;
  --gutter: 20px;

  /* === Typography === */
  --radius: 16px;
  --radius-lg: 24px;
  --font-display: 'Literata', serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Typography tokens (font: weight size/line-height family) */
  --text-display-lg: 700 40px/48px 'Literata', serif;
  --text-display-lg-mobile: 700 32px/38px 'Literata', serif;
  --text-headline-md: 600 24px/32px 'Literata', serif;
  --text-title-md: 600 16px/24px 'Hanken Grotesk', sans-serif;
  --text-caption: 400 14px/20px 'Hanken Grotesk', sans-serif;
  --text-caption-sm: 400 13px/18px 'Hanken Grotesk', sans-serif;
  --text-body-sm: 400 15px/22px 'Hanken Grotesk', sans-serif;
  --text-body-lg: 400 18px/28px 'Hanken Grotesk', sans-serif;
  --text-body-md: 400 16px/24px 'Hanken Grotesk', sans-serif;
  --text-label-sm: 600 14px/20px 'Hanken Grotesk', sans-serif;
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --safe-area-bottom: env(safe-area-inset-bottom, 20px);
  --safe-area-top: env(safe-area-inset-top, 0px);
}

/* ===================== KEYFRAME ANIMATIONS ===================== */

@keyframes bump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}