/* ==========================================================================
   Mera Pets — tokens.css
   Design system v1.0 · §3 Color, §4 Type, §5 Space, §6 Motion.
   Mirrors theme.json 1:1. Any token drift between this file and theme.json
   is a P1 bug (§17).
   ========================================================================== */

:root {
  /* --- §3.1 Neutrals ------------------------------------------------ */
  --mp-ink:        #131210;
  --mp-ink-2:      #1E1B17;
  --mp-ink-3:      #2A2620;
  --mp-stone-600:  #6F675B;
  --mp-stone-500:  #8C8577;
  --mp-stone-400:  #A9A296;
  --mp-clay:       #E6DFD2;
  --mp-bone:       #F2EEE6;
  --mp-porcelain:  #FBF9F5;

  /* --- §3.2 Brand accents ------------------------------------------- */
  --mp-ember:      #B4501F;
  --mp-ember-700:  #9A431A;
  --mp-ember-100:  #F7E4D6;
  --mp-saffron:    #E0A03C;
  --mp-kelp:       #1F3B30;
  --mp-chloro:     #7FA45C;
  --mp-roe:        #E2765A;
  --mp-aronia:     #4A2340;

  /* --- §3.4 Semantic mapping ---------------------------------------- */
  --mp-bg:            var(--mp-porcelain);
  --mp-bg-alt:        var(--mp-bone);
  --mp-bg-inverse:    var(--mp-ink);
  --mp-surface:       var(--mp-porcelain);
  --mp-surface-raise: #FFFFFF;
  --mp-text:          var(--mp-ink);
  --mp-text-muted:    var(--mp-stone-600);
  --mp-text-inverse:  var(--mp-porcelain);
  --mp-text-link:     var(--mp-ember-700);
  --mp-border:        var(--mp-clay);
  --mp-border-strong: rgba(19, 18, 16, .18);
  --mp-focus:         var(--mp-saffron);

  --mp-success: #3F6B4A;
  --mp-warning: #C08A2E;
  --mp-danger:  #9E3423;
  --mp-info:    var(--mp-kelp);

  /* --- §3.5 Ingredient gradients ------------------------------------ */
  --mp-grad-kitchen: linear-gradient(112deg, #F6E3CC 0%, #EFC9A4 46%, #E0A882 100%);
  --mp-grad-formula: linear-gradient(112deg, #E4EAD4 0%, #C3D6B4 48%, #9CBE9E 100%);
  --mp-grad-ritual:  linear-gradient(112deg, #EEDCE2 0%, #DFC3CE 45%, #C39CB4 100%);
  --mp-grad-marine:  linear-gradient(112deg, #FBE0D2 0%, #F3B9A3 50%, #E2765A 100%);
  --mp-glow-ember:   radial-gradient(60% 70% at 72% 18%, rgba(180, 80, 31, .32) 0%, rgba(19, 18, 16, 0) 70%);

  /* --- §4 Typography ------------------------------------------------- */
  --mp-font-display: "Fraunces", Georgia, serif;
  --mp-font-ui:      "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mp-font-mono:    "Martian Mono", ui-monospace, "SF Mono", monospace;

  /* §4.3 Type scale — fluid clamp() tokens */
  --mp-t-d1: clamp(2.75rem, 1rem + 6vw, 7rem);
  --mp-t-d2: clamp(2.25rem, 0.9rem + 4.6vw, 5.5rem);
  --mp-t-d3: clamp(2rem, 0.9rem + 3.4vw, 4rem);
  --mp-t-h1: clamp(2rem, 1.1rem + 2.6vw, 3.5rem);
  --mp-t-h2: clamp(1.625rem, 1rem + 1.7vw, 2.5rem);
  --mp-t-h3: clamp(1.375rem, 0.95rem + 1vw, 1.75rem);
  --mp-t-h4: 1.375rem;
  --mp-t-lg:  1.25rem;
  --mp-t-md:  1.125rem;
  --mp-t-sm:  1rem;
  --mp-t-xs:  0.875rem;
  --mp-t-micro: 0.75rem;

  /* --- §5.1 Spacing (4px base) -------------------------------------- */
  --mp-s-1: 4px;   --mp-s-2: 8px;   --mp-s-3: 12px;  --mp-s-4: 16px;
  --mp-s-5: 20px;  --mp-s-6: 24px;  --mp-s-8: 32px;  --mp-s-10: 40px;
  --mp-s-12: 48px; --mp-s-16: 64px; --mp-s-20: 80px; --mp-s-24: 96px;
  --mp-s-30: 120px;--mp-s-40: 160px;--mp-s-50: 200px;

  /* --- §5.2 Container widths ---------------------------------------- */
  --mp-w-text:  720px;
  --mp-w-cont: 1240px;
  --mp-w-wide: 1440px;
  --mp-w-bleed: 1824px;
  --mp-gutter:  clamp(20px, 4vw, 48px);

  /* --- §5.4 Section rhythm ------------------------------------------ */
  --mp-section-y:    clamp(72px, 9vw, 160px);
  --mp-section-y-lg: clamp(96px, 12vw, 220px);

  /* --- §5.5 Radii ---------------------------------------------------- */
  --mp-r-xs: 6px;
  --mp-r-sm: 10px;
  --mp-r-md: 16px;
  --mp-r-lg: 20px;
  --mp-r-xl: 28px;
  --mp-r-pill: 999px;

  /* --- §5.7 Elevation ------------------------------------------------ */
  --mp-e-1: 0 1px 2px rgba(19,18,16,.05), 0 1px 1px rgba(19,18,16,.04);
  --mp-e-2: 0 2px 4px rgba(19,18,16,.05), 0 6px 12px rgba(19,18,16,.05);
  --mp-e-3: 0 4px 8px rgba(19,18,16,.05), 0 16px 32px rgba(19,18,16,.07);
  --mp-e-4: 0 8px 16px rgba(19,18,16,.06), 0 32px 64px rgba(19,18,16,.10);
  --mp-e-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* --- §6.1 Motion --------------------------------------------------- */
  --mp-dur-1: 120ms;
  --mp-dur-2: 200ms;
  --mp-dur-3: 320ms;
  --mp-dur-4: 560ms;
  --mp-dur-5: 900ms;
  --mp-ease-out:   cubic-bezier(.16, 1, .30, 1);
  --mp-ease-std:   cubic-bezier(.22, .61, .36, 1);
  --mp-ease-in:    cubic-bezier(.55, 0, 1, .45);
  --mp-ease-glide: cubic-bezier(.65, 0, .35, 1);

  /* Chapter accent defaults (§3.6) — scoped per section via .chapter--* */
  --chapter-accent: var(--mp-ember);
  --chapter-grad:   var(--mp-grad-kitchen);
  --chapter-dark:   var(--mp-ink);
}

/* §3.6 Chapter accent assignment */
.chapter--kitchen { --chapter-accent: var(--mp-ember);  --chapter-grad: var(--mp-grad-kitchen); --chapter-dark: var(--mp-ink);   }
.chapter--formula { --chapter-accent: var(--mp-chloro); --chapter-grad: var(--mp-grad-formula); --chapter-dark: var(--mp-kelp);  }
.chapter--ritual  { --chapter-accent: var(--mp-roe);    --chapter-grad: var(--mp-grad-ritual);  --chapter-dark: var(--mp-aronia); }

/* §3.7 Dark mode — substrate only; photography and gradients are fixed. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mp-bg: #16140F;
    --mp-bg-alt: #1E1B16;
    --mp-surface: #1E1B16;
    --mp-surface-raise: #272219;
    --mp-text: #F4F0E7;
    --mp-text-muted: #B4AC9D;
    --mp-border: #322C23;
    --mp-border-strong: rgba(244,240,231,.22);
    --mp-text-link: var(--mp-saffron);
  }
}
:root[data-theme="dark"] {
  --mp-bg: #16140F;
  --mp-bg-alt: #1E1B16;
  --mp-surface: #1E1B16;
  --mp-surface-raise: #272219;
  --mp-text: #F4F0E7;
  --mp-text-muted: #B4AC9D;
  --mp-border: #322C23;
  --mp-border-strong: rgba(244,240,231,.22);
  --mp-text-link: var(--mp-saffron);
}