/**
 * Raisen Food Lovers - Design Tokens & CSS Variables
 * Edit these variables to easily change the color scheme, fonts,
 * spacing, and dimensions globally across the entire website.
 */

:root {
  /* Bakery Inspired Color Palette */
  --color-bg: #FAF5EF;              /* Warm cream / ivory */
  --color-bg-alt: #F4EBE0;          /* Subtle darker warm tint */
  --color-surface: #FFFFFF;         /* Crisp white for cards/modals */
  --color-surface-warm: #FFFDF9;    /* Ultra warm cream surface */
  --color-surface-soft: #F6EDE2;    /* Soft beige / parchment */

  /* Pastel Theme Colors */
  --color-primary: #D96B7D;         /* Soft rose / bakery blush */
  --color-primary-dark: #B54A5D;    /* Deep rose for active/hover */
  --color-primary-light: #FBECEF;   /* Light rose tint */
  --color-primary-glow: rgba(217, 107, 125, 0.25);

  --color-pink-card: #FCECEF;       /* Soft pink category card */
  --color-pink-border: #F7D3DC;
  
  --color-yellow-card: #FEF4DC;     /* Soft buttery yellow category card */
  --color-yellow-border: #FCE5B4;

  --color-sage-card: #EAF3EC;       /* Soft sage mint category card */
  --color-sage-border: #D3E7D8;

  --color-lavender-card: #F3EEF9;   /* Soft lilac category card */
  --color-lavender-border: #E3D7F1;

  /* Typography Colors */
  --color-text-main: #2E1C15;       /* Warm espresso brown / dark chocolate */
  --color-text-secondary: #6B564C;  /* Warm grey-brown for body copy */
  --color-text-muted: #957F76;      /* Muted captions & metadata */
  --color-text-inverse: #FFFFFF;

  /* Functional Accents */
  --color-border: #ECDCCE;          /* Gentle divider/border */
  --color-border-subtle: #F3E8DC;
  --color-whatsapp: #25D366;        /* Official WhatsApp green */
  --color-whatsapp-dark: #1EBE5D;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.28);
  --color-instagram: #E1306C;       /* Official Instagram accent */
  --color-gold: #C99738;            /* Delicate gold leaf accent */

  /* Typography Fonts */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;

  /* Font Scales */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 1.875rem;   /* 30px */
  --fs-3xl: 2.375rem;   /* 38px */
  --fs-4xl: 3rem;       /* 48px */
  --fs-hero: clamp(2.4rem, 4.8vw, 3.85rem);

  /* Font Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line Heights */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Spacing */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4.5rem;  /* 72px */
  --space-4xl: 6rem;    /* 96px */

  /* Layout Containers */
  --container-max: 1220px;
  --container-narrow: 920px;
  --container-pad: 1.5rem;

  /* Border Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-subtle: 0 4px 18px rgba(46, 28, 21, 0.04);
  --shadow-card: 0 10px 30px rgba(46, 28, 21, 0.06);
  --shadow-card-hover: 0 18px 45px rgba(46, 28, 21, 0.11);
  --shadow-float: 0 16px 36px rgba(217, 107, 125, 0.24);
  --shadow-modal: 0 25px 60px rgba(46, 28, 21, 0.25);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Header Height */
  --header-height: 80px;
}