/* ==========================================================================
   FoodChaser design tokens — CSS custom properties
   Generated from tokens/foodchaser-tokens.json. Do not edit by hand: edit the
   JSON and regenerate, so the app (Colors.xaml) and the web stay in step.

   Owner: ViviScape LLC · v1.0.0 · 2026-08-31
   Spec:  ../STYLE-GUIDE.md

   Usage on the marketing site:
     <link rel="stylesheet" href="~/css/foodchaser.css">
   then delete the inline `:root`/`.fc` colour block in
   Pages/FoodChaser.cshtml (STYLE-GUIDE.md §11, item 5).

   FoodChaser is dark-only by design. There is no light theme; adding one is a
   product decision, not a styling one.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  /* Accent. Fills, icons, active tab, glyphs. NOT a text colour on dark: it
     scores 4.32:1 and fails AA for normal text. Use --fc-pink-soft for type. */
  --fc-pink:        #E8177B;
  /* Pink type on dark. 6.4:1. Links, eyebrows, hashtags, small emphasis. */
  --fc-pink-soft:   #F2669F;
  /* Pink that carries white body text. 5.6:1 with #fff. Primary button fill. */
  --fc-pink-deep:   #C9106A;
  /* Identity. Brand bar, app-icon ground, logo, the countdown clock. */
  --fc-yellow:      #FFDE59;
  /* Type and icons ON yellow. 12.3:1. Never a page background. */
  --fc-on-yellow:   #231F20;

  /* ---- Surfaces, darkest to lightest ----------------------------------- */
  --fc-bg:          #121212;  /* page + tab background (was --fc-ink) */
  --fc-raised:      #1B1B1E;  /* cards, fields, tab bar */
  --fc-overlay:     #26262B;  /* chips, secondary buttons, progress track */
  --fc-outline:     #33333A;  /* the one border colour */
  --fc-scrim:       rgba(0, 0, 0, 0.65);

  /* ---- Content on dark -------------------------------------------------- */
  --fc-on:          #F6F6F7;  /* 16.4:1 — primary type, icons */
  --fc-muted:       #A7A7AE;  /*  7.8:1 — secondary type, body copy */
  --fc-subtle:      #8A8A93;  /*  5.5:1 — meta text at ≤13px */
  --fc-faint:       #70707A;  /*  3.8:1 — DECORATIVE ONLY, fails AA for text */

  /* ---- Status ----------------------------------------------------------- */
  --fc-success:     #3BD07A;  /* Live / confirmed / OPEN NOW */
  --fc-warning:     #FFC53D;  /* Fading */
  --fc-danger:      #FF4D48;  /* destructive, closed, error */

  /* ---- Gradients -------------------------------------------------------- */
  /* The ONLY permitted decorative gradient: the find-card TTL bar. Pink
     draining to yellow reads as time running out. Do not reuse it. */
  --fc-grad-ttl:    linear-gradient(90deg, #E8177B, #FFDE59);
  --fc-grad-avatar: linear-gradient(140deg, #E8177B, #7B1FA2);
  --fc-grad-photo:  linear-gradient(150deg, #4A2130, #2A1420 55%, #1E1218);

  /* ---- Type ------------------------------------------------------------- */
  --fc-font-display: 'Poppins', 'Trebuchet MS', system-ui, sans-serif;
  --fc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fc-text-micro:   11px;
  --fc-text-caption: 13px;
  --fc-text-body:    15px;
  --fc-text-heading: 18px;
  --fc-text-title:   22px;
  --fc-text-display: 28px;

  --fc-h1:           clamp(38px, 5.2vw, 60px);
  --fc-h2:           clamp(28px, 3.4vw, 40px);
  --fc-h3:           23px;

  --fc-lh-tight:     1.04;
  --fc-lh-snug:      1.25;
  --fc-lh-normal:    1.65;
  --fc-lh-loose:     1.7;

  --fc-track-display: -1.4px;
  --fc-track-heading: -1px;
  --fc-track-eyebrow: 1.4px;
  --fc-track-kicker:  1.6px;

  /* ---- Space (4px base) ------------------------------------------------- */
  --fc-space-1: 4px;
  --fc-space-2: 8px;
  --fc-space-3: 12px;
  --fc-space-4: 16px;
  --fc-space-5: 20px;
  --fc-space-6: 24px;
  --fc-space-7: 32px;
  --fc-space-8: 46px;
  --fc-space-9: 62px;   /* section padding, mobile */
  --fc-space-10: 88px;  /* section padding, desktop */

  /* ---- Shape ------------------------------------------------------------ */
  --fc-radius-chip:    9px;
  --fc-radius-control: 14px;
  --fc-radius-card:    16px;
  --fc-radius-tile:    18px;
  --fc-radius-panel:   22px;
  --fc-radius-icon:    22px;
  --fc-radius-full:    999px;
  --fc-border:         1px;

  /* ---- Sizing ----------------------------------------------------------- */
  --fc-touch-target:   44px;
  --fc-control-height: 52px;
  --fc-field-height:   50px;
  --fc-avatar:         30px;
  --fc-content-max:    1180px;
  --fc-gutter:         24px;

  /* ---- Elevation -------------------------------------------------------- */
  --fc-shadow-cta:       0 12px 34px rgba(232, 23, 123, 0.34);
  --fc-shadow-cta-hover: 0 16px 42px rgba(232, 23, 123, 0.44);
  --fc-shadow-phone:     0 40px 90px rgba(0, 0, 0, 0.65);

  /* ---- Motion ----------------------------------------------------------- */
  --fc-dur-press: 180ms;
  --fc-dur-state: 200ms;
  --fc-dur-pulse: 2200ms;
  --fc-ease:      ease;
}

/* Legacy alias. `--fc-ink` used to mean the page background on the web while
   BrandInk means type-on-yellow in the app — the same name doing two jobs.
   Kept so existing markup keeps rendering; remove once Pages/FoodChaser.cshtml
   has moved to --fc-bg. (STYLE-GUIDE.md §11, item 4.) */
:root { --fc-ink: var(--fc-bg); }

/* Honour the OS setting: kill the live-dot loop and the hover lift, keep
   colour transitions. (STYLE-GUIDE.md §9.) */
@media (prefers-reduced-motion: reduce) {
  :root { --fc-dur-press: 1ms; --fc-dur-state: 1ms; }
  .fc-eyebrow .dot { animation: none !important; }
  .fc-btn:hover, .fc-feat:hover { transform: none !important; }
}