/* MyFoodCraving — shared design tokens. Single source of truth.
   Linked by every consumer page; never redefine these in a page <style> block. */
:root {
  --cream: #F7F1E3;
  --cream-deep: #EFE6CF;
  --cream-soft: #FBF7EC;
  --paper: #FFFCF3;
  --kraft: #E8DCC0;

  --ink: #1F1A14;
  --ink-soft: #3A332A;
  --ink-muted: #6B6253;
  --ink-faint: #9A8F7C; /* borders/dividers/decoration ONLY — never body or caption text */
  --rule: rgba(31, 26, 20, 0.14);
  --rule-strong: rgba(31, 26, 20, 0.28);

  --orange: #FF6D2E;        /* bright: fills, ::selection, decorative, display >=24px bold */
  --orange-deep: #E2531A;   /* hover for bright-orange fills */
  --orange-soft: rgba(255, 109, 46, 0.14);
  --orange-text: #CC4A14;       /* 4.5:1 on paper — orange TEXT, icons, button labels */
  --orange-text-hover: #A83C10; /* darker hover for orange-text / orange-bg controls */

  --matcha: #7A9C5A;
  --matcha-deep: #5E7E40;
  --matcha-soft: rgba(122, 156, 90, 0.18);
  --berry: #C84B5A;
  --butter: #F4D67A;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --hand: "Caveat", "Reenie Beanie", cursive;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;
  --container: 1240px;

  --pop-sm: 3px 3px 0 var(--ink);
  --pop-md: 4px 4px 0 var(--ink);
  --pop-lg: 6px 6px 0 var(--ink);
  --pop-xl: 8px 8px 0 var(--ink);
  --pop-matcha: 8px 8px 0 var(--matcha);
}

/* Global keyboard focus ring */
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }

/* Skip link */
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 1000;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 13px; text-decoration: none;
  transition: top 160ms;
}
.skip-link:focus { top: 8px; }

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