/* ──────────────────────────────────────────────────────────────
   mammam design tokens
   The only place raw colour / spacing / type / motion values live.
   Components reference these variables, never hex values.
   This file is meant to move to app/src/styles/tokens.css as-is.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Colour: brand ── */
  --c-chilli: #d42a2a;          /* primary action, Log it, "No" stamp */
  --c-chilli-deep: #a81c1f;     /* pressed state */
  --c-chilli-soft: #fbe3df;
  --c-sambal: #ec6a22;          /* accents, stars, Decide */
  --c-sambal-soft: #fde9da;
  --c-pandan: #3d8b45;          /* "Yes" stamp, halal certified, open now */
  --c-pandan-deep: #2c6a33;
  --c-pandan-soft: #e2f0dc;

  /* ── Colour: neutrals (warm, santan + kicap) ── */
  --c-santan: #fbf6ee;          /* app background, warm off-white */
  --c-surface: #ffffff;
  --c-surface-sunk: #f3ebdf;    /* inputs, segmented control track */
  --c-line: #e8dccd;
  --c-kicap: #2b1d16;           /* ink: soy-sauce brown instead of black */
  --c-kicap-2: #6f5e51;         /* secondary text */
  --c-kicap-3: #a3927f;         /* tertiary text, placeholders */
  --c-on-brand: #ffffff;
  --c-scrim: rgb(43 29 22 / 0.55);
  --c-camera: #1b1310;          /* camera viewfinder background */

  /* ── Colour: placeholder photo tints (by cuisine) ── */
  --c-tint-malay: #e9b26a;
  --c-tint-chinese: #c9764a;
  --c-tint-indian: #d9913a;
  --c-tint-western: #b98d6b;
  --c-tint-other: #9fae7a;

  /* ── Type: system stack (SF Pro on iOS), Inter fallback ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.75rem;     /* 28 */
  --fs-2xl: 2.25rem;    /* 36 */
  --fs-hero: 2.75rem;   /* 44: question cards, result dish name */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.45;
  --tracking-display: -0.025em;

  /* ── Spacing (4px grid) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Radius: hierarchy, not one value for everything ── */
  --r-sm: 6px;       /* chips, badges */
  --r-md: 12px;      /* list rows, inputs */
  --r-lg: 20px;      /* cards */
  --r-xl: 28px;      /* question card, sheets */
  --r-pill: 999px;

  /* ── Elevation ── */
  --shadow-card: 0 1px 0 rgb(43 29 22 / 0.06), 0 2px 8px rgb(43 29 22 / 0.06);
  --shadow-lift: 0 10px 30px rgb(43 29 22 / 0.16);

  /* ── Layout ── */
  --tabbar-h: 64px;
  --topbar-h: 52px;
  --tap-min: 44px;
  --phone-max: 430px;

  /* ── Motion (design-direction §5) ── */
  --dur-fast: 120ms;     /* presses, toggles */
  --dur-base: 200ms;     /* screen transitions: never slower */
  --dur-stamp: 280ms;    /* Log it stamp: must finish within 300ms */
  --dur-swipe: 260ms;    /* answered card leaving */
  --dur-reveal: 640ms;   /* result reveal: the one big moment */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-stamp: cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* Reduced motion: collapse durations so transitions become instant swaps. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-stamp: 0ms;
    --dur-swipe: 0ms;
    --dur-reveal: 160ms;   /* kept as a plain fade, see decide.css */
  }
}