/* === DESIGN TOKENS — Sorso Caffetteria === */
:root {
  /* Background — warm cream */
  --color-bg-deep: #F5EDE4;
  --color-bg: #FAF6F1;
  --color-bg-elevated: #FFFFFF;
  --color-bg-surface: #F0E8DE;
  --color-bg-dark: #1A0F08;

  /* Primary — Terracotta */
  --color-primary: #C4704B;
  --color-primary-light: #D4896A;
  --color-primary-dark: #A85A38;
  --color-primary-glow: rgba(196, 112, 75, 0.2);

  /* Secondary — Sage Green */
  --color-secondary: #7D8E6E;
  --color-secondary-light: #97A889;
  --color-secondary-glow: rgba(125, 142, 110, 0.2);

  /* Tertiary — Espresso */
  --color-tertiary: #5C3D2E;
  --color-tertiary-glow: rgba(92, 61, 46, 0.15);

  /* Text */
  --color-text: #2C1810;
  --color-text-muted: #8A7E76;
  --color-text-subtle: #B5A99E;
  --color-white: #FFFDF9;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #C4704B 0%, #D4896A 50%, #7D8E6E 100%);
  --gradient-glow: radial-gradient(ellipse at center, var(--color-primary-glow) 0%, transparent 70%);
  --gradient-card: linear-gradient(135deg, rgba(196,112,75,0.06) 0%, rgba(125,142,110,0.06) 100%);
  --gradient-warm: linear-gradient(135deg, #C4704B, #E8A87C, #7D8E6E);

  /* Borders */
  --color-border: rgba(44, 24, 16, 0.08);
  --color-border-hover: rgba(196, 112, 75, 0.3);

  /* Typography */
  --font-handwritten: 'Common Hands', cursive, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --text-hero: clamp(3.5rem, 2rem + 7vw, 9rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  /* Z-index */
  --z-cursor: 9999;
  --z-nav: 100;
  --z-overlay: 50;

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 9999px;
}