/* Chicken Rice Art · design tokens (Clean light aesthetic with signature vibrant orange) */
:root {
  /* surfaces - fresh, clean, appetizing light background */
  --c-bg: #fcfbfa;
  --c-bg-2: #ffffff;
  --c-bg-3: #f5f2ee;
  --c-bg-card: #ffffff;
  --c-line: #ebe7e4;
  --c-line-subtle: #f4efeb;

  /* brand colors from mobile app: vibrant energetic orange (#FF4F03) & deep plum purple (#54142E) */
  --c-orange: #FF4F03;
  --c-orange-hover: #e04300;
  --c-orange-subtle: #fff5ee;
  --c-purple: #54142E;
  --c-purple-dark: #3a0e1f;
  --c-purple-light: #721b3f;
  --c-purple-subtle: #f9f1f4;
  --c-cream: #F7D7B7;
  --c-yellow: #ffb703;

  /* legacy alias so any red reference maps to vibrant brand purple / orange */
  --c-red: #FF4F03;
  --c-red-deep: #54142E;

  /* text */
  --c-text: #1f191b;
  --c-text-mute: #5c5256;
  --c-text-light: #7a6e73;
  --c-ink: #1f191b;

  /* sauce swatches (used by chips + filters) */
  --s-kori: #f2c230;
  --s-mantar: #dfd7c2;
  --s-meksika: #8fae2e;
  --s-napoli: #d9452b;
  --s-barbeku: #7a2416;

  /* typography */
  --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(2rem, 6vw, 3rem);
  --text-3xl: clamp(2.75rem, 10vw, 5rem);
  --text-display: clamp(3.5rem, 14vw, 8.5rem);

  /* space · 4pt */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;

  --focus: var(--c-orange);
  --gutter: 16px;
  --maxw: 1200px;
}
