/* =========================================================
   DishMyDay brand tokens (shared by app, privacy, restaurants, brand board)
   Contrast (WCAG 2.x): white on --brand-primary 5.2:1, white on --brand-accent 5.3:1,
   --ink on --bg 15.6:1, --muted on --surface 6.4:1, --ink on --brand-saffron 8.2:1  (all AA)
   --brand-warm and --brand-saffron are decorative / large-display only, never body text on white.
   ========================================================= */
@import url("/fonts/inter.css");
:root{
  /* palette */
  --brand-primary:#C9351F;        /* Tomato: CTAs, selected states, links on light bg */
  --brand-primary-strong:#A82A17; /* Tomato 700: hover/pressed, small text links */
  --brand-primary-soft:#FDECE8;   /* Tomato 50: tinted backgrounds, exclusion tags */
  --brand-warm:#F26B2C;           /* Tangerine: gradient start, illustration only */
  --brand-saffron:#F4A71D;        /* Saffron: highlights, quick filters, deal ribbons (ink text) */
  --brand-saffron-soft:#FFF1D6;
  --brand-accent:#1E7A4C;         /* Basil: success, "OK to eat" diet tags, confirmations */
  --brand-accent-soft:#E4F4EA;
  --ink:#2A1C15;                  /* Espresso ink: text, dark UI */
  --muted:#6E5B50;                /* Secondary text (AA on white & cream) */
  --line:#F0E2D5;
  --bg:#FFF8F1;                   /* Cream: app background */
  --surface:#FFFFFF;              /* Cards */
  --canvas:#F5E9DE;               /* Area around the phone column on desktop */
  --grad-brand:linear-gradient(135deg,#E8541F 0%,#C9351F 100%);
  --grad-button:linear-gradient(135deg,#D63A22 0%,#B8301C 100%);
  /* type */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-display:28px; --fs-h2:22px; --fs-title:17px; --fs-body:15px; --fs-small:13px; --fs-caption:11px;
  /* shape */
  --r-lg:24px; --r-md:16px; --r-sm:10px; --r-pill:999px;
  --shadow-1:0 2px 8px rgba(42,28,21,.08);
  --shadow-2:0 10px 28px rgba(42,28,21,.12);
  --shadow-brand:0 10px 22px rgba(201,53,31,.28);
  /* motion */
  --ease-pop:cubic-bezier(.3,1.4,.5,1); --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-fast:150ms; --dur:250ms; --dur-flip:700ms;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}
/* shared components */
.dmd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;font:inherit;font-weight:700;cursor:pointer;
  border-radius:var(--r-md);padding:14px 18px;font-size:var(--fs-body);text-decoration:none;transition:transform var(--dur-fast),box-shadow var(--dur)}
.dmd-btn:active{transform:scale(.97)}
.dmd-btn.primary{color:#fff;background:var(--grad-button);box-shadow:var(--shadow-brand)}
.dmd-btn.primary:hover{background:var(--brand-primary-strong)}
.dmd-btn.ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2)}
.dmd-btn.accent{background:var(--brand-accent);color:#fff}
.dmd-btn.soft{background:var(--brand-primary-soft);color:var(--brand-primary-strong)}
:focus-visible{outline:3px solid var(--brand-saffron);outline-offset:2px}
.dmd-page{font-family:var(--font);background:var(--bg);color:var(--ink);margin:0;line-height:1.55}
.dmd-page a{color:var(--brand-primary-strong)}
.dmd-wrap{max-width:720px;margin:0 auto;padding:24px 20px 48px}
.dmd-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.dmd-top .name{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:-.3px}
.dmd-langs{margin-left:auto;display:flex;background:var(--surface);border-radius:var(--r-pill);padding:3px;box-shadow:var(--shadow-1)}
.dmd-langs button{border:none;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--muted);padding:6px 10px;border-radius:var(--r-pill);cursor:pointer}
.dmd-langs button.on{background:var(--ink);color:#fff}
.dmd-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:22px 24px;margin:14px 0}
.dmd-page h1{font-size:30px;letter-spacing:-.5px;line-height:1.2;margin:8px 0 6px}
.dmd-page h2{font-size:18px;margin:18px 0 6px}
.dmd-muted{color:var(--muted);font-size:var(--fs-small)}
.dmd-foot{color:var(--muted);font-size:12px;text-align:center;margin-top:28px}
