/* ============================================================
   GRUBPLANIT — DESIGN TOKENS
   Palette sampled directly from the live product UI:
   ocean header gradient, fresh-green "Cook" action,
   harbor-blue "Order" action, sage-cream canvas.
   ============================================================ */

:root{
  /* --- Brand color core (from live app) --- */
  --navy-950:#12203A;
  --navy-800:#1C2D4B;
  --navy-700:#26395C;
  --ocean-600:#2082C1;
  --ocean-700:#2A5D8F;
  --ocean-800:#23406E;
  --fresh-600:#4F9B44;
  --fresh-700:#3E7C36;
  --harbor-600:#3276A3;
  --harbor-700:#255977;
  --gold-500:#C9A227;
  --gold-300:#E4C868;

  /* --- Neutrals / surface --- */
  --cream-100:#EFF5EB;
  --cream-200:#E4EDDD;
  --paper-0:#FFFFFF;
  --mist-100:#E3E9F5;
  --mist-200:#D3DCF0;
  --line-100:#DDE4D6;
  --ink-900:#141C1A;
  --ink-600:#546056;
  --ink-400:#7C887E;

  /* --- Gradients --- */
  --grad-header: linear-gradient(115deg, var(--ocean-600) 0%, var(--ocean-800) 65%, var(--navy-800) 100%);
  --grad-cta: linear-gradient(120deg, var(--fresh-600), var(--ocean-700));

  /* --- Type --- */
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* --- Radii --- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-pill:999px;

  /* --- Shadows --- */
  --shadow-card: 0 1px 2px rgba(20,28,26,.04), 0 8px 24px -12px rgba(18,32,58,.18);
  --shadow-pop: 0 20px 45px -18px rgba(18,32,58,.32);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,.14);

  /* --- Spacing scale --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-sm:.2s; --dur-md:.4s; --dur-lg:.7s;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   BOOTSTRAP 5 VARIABLE OVERRIDES
   Remaps Bootstrap's theme variables onto the GrubPlanit palette
   so every Bootstrap component (navbar, buttons, forms, cards,
   carousel, offcanvas) inherits the brand automatically.
   ============================================================ */
:root{
  --bs-primary:var(--ocean-700);
  --bs-primary-rgb:42,93,143;
  --bs-success:var(--fresh-600);
  --bs-success-rgb:79,155,68;
  --bs-info:var(--harbor-600);
  --bs-info-rgb:50,118,163;
  --bs-warning:var(--gold-500);
  --bs-warning-rgb:201,162,39;
  --bs-danger:#D64550;
  --bs-danger-rgb:214,69,80;
  --bs-dark:var(--navy-950);
  --bs-dark-rgb:18,32,58;
  --bs-light:var(--cream-100);
  --bs-light-rgb:239,245,235;
  --bs-body-bg:var(--cream-100);
  --bs-body-color:var(--ink-900);
  --bs-body-font-family:var(--font-body);
  --bs-border-radius:var(--r-md);
  --bs-border-radius-sm:var(--r-sm);
  --bs-border-radius-lg:var(--r-lg);
  --bs-border-radius-pill:var(--r-pill);
  --bs-border-color:var(--line-100);
  --bs-link-color:var(--ocean-700);
  --bs-link-hover-color:var(--ocean-800);
  --bs-heading-color:var(--navy-800);
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; color:var(--navy-800); }
.btn{ font-weight:700; }
.btn-primary{ --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; }
.btn-success{ --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; }
.btn-outline-light:hover{ color:var(--navy-800); }
.rounded-pill-lg{ border-radius:var(--r-pill) !important; }
small, .small, .text-mono{ font-family:var(--font-mono); }