/* ararifoods.com — Design tokens */

:root {
  /* Neutrals */
  --bg: #fdf9f3;
  --bg-alt: #f8f1e7;
  --bg-dark: #2d1408;

  /* Ink */
  --ink: #1a1209;
  --ink-muted: #6b5a4a;
  --ink-dim: rgba(26, 18, 9, 0.38);

  /* Accents */
  --accent-pink: #d63384;
  --accent-pink-soft: #e8669e;
  --accent-caramel: #e8662b;
  --accent-gold: #c89a3e;

  /* On-dark */
  --ink-on-dark: #f0dcc2;
  --ink-on-dark-muted: rgba(240, 220, 194, 0.65);

  /* Flavors */
  --flavor-chocolate: #5e3a1e;
  --flavor-strawberry: #e8526b;
  --flavor-blueberry: #5c6bc9;
  --flavor-matcha: #7a9e3e;
  --flavor-almond: #c49a6c;
  --flavor-cookies: #e8d6b3;
  --flavor-mango: #f2a824;
  --flavor-milk: #f0ebde;
  --flavor-pistachio: #a3c27a;
  --flavor-cantaloupe: #f5a65b;
  --flavor-durian: #d4c158;
  --flavor-coconut: #f0e5d0;

  /* Fonts — SUIT (display + body, heavy) */
  --font-display: 'SUIT', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --font-display-alt: 'SUIT', 'Pretendard Variable', system-ui, sans-serif;
  --font-body: 'SUIT', 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
  --font-kr: 'SUIT', 'Pretendard Variable', 'Pretendard', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-serif-italic: 'Fraunces', Georgia, serif;
  --display-weight: 900;

  /* Type scale */
  --text-hero: clamp(2.5rem, min(8vw, 14vh), 6.5rem);
  --text-display: clamp(2.25rem, 5vw, 4rem);
  --text-title: clamp(1.75rem, 3.5vw, 2.75rem);
  --text-subtitle: clamp(1.25rem, 2vw, 1.5rem);
  --text-lead: clamp(1.1rem, 1.5vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-tiny: 0.75rem;
  --text-meta: 0.6875rem;
  --text-meta-sm: 0.625rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* Containers */
  --container-max: 1440px;
  --container-xl: 1200px;
  --container-lg: 960px;
  --container-md: 720px;
  --container-sm: 540px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cinema: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.55, 1.5, 0.5, 1);

  --duration-instant: 100ms;
  --duration-quick: 250ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
  --duration-cinema: 1800ms;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}