/*
 * Maman & Moi: design tokens
 * Source: design/handoff/tokens.css (Claude Design element kit, sheet 01), plus the
 * additions agreed in design/handoff/REVIEW.md. The theme copies this file unchanged.
 * The free-delivery amount is NOT a token: it is data-free-from on <body>.
 */
:root {
  /* Brand: the four logo colours */
  --mm-navy:        #00225C;
  --mm-mint:        #75D3B9;
  --mm-coral:       #E87F69;
  --mm-grey:        #757170;
  --mm-white:       #FFFFFF;

  /* Derived: panels and states */
  --mm-navy-hover:  #14397E;
  --mm-navy-press:  #00153A;
  --mm-mint-50:     #F2FBF8;
  --mm-mint-100:    #E3F6F0;
  --mm-mint-200:    #C3EBDF;
  --mm-coral-50:    #FEF6F4;
  --mm-coral-100:   #FCE9E4;
  --mm-coral-200:   #F7CFC5;
  --mm-dusk-100:    #E6EAF2;
  --mm-grey-700:    #5E5A59;
  --mm-line:        #E6E3E1;
  --mm-line-strong: #8A8685;
  --mm-error:       #B3412C;
  --mm-disabled-bg: #EEEDEC;
  --mm-disabled-fg: #6E6A69;

  /* Added 17 Oct (REVIEW.md): values the sheets hard-coded */
  --mm-hole:          #CFCBC9;            /* guide holes, swatch hover ring */
  --mm-accent-hover:  #EE998A;
  --mm-accent-press:  #DB6E58;
  --mm-skeleton:      #EFEFEE;
  --mm-photo:         #EDEFEE;            /* photo slot ground, mock-up only */
  --mm-field-off-bg:  #F4F3F2;
  --mm-field-off-line:#D9D6D4;
  --mm-glyph-off:     #B5B1B0;
  --mm-dim:           rgb(0 34 92 / .4);

  /* Added 17 Oct (audit): see-through navy and white the sheets wrote inline, named by job */
  --mm-hover-on-navy: rgb(255 255 255 / .12);   /* icon and social buttons on navy */
  --mm-tag-on-photo:  rgb(255 255 255 / .88);   /* the AI tag over her photos */
  --mm-tag-stitch:    rgb(0 34 92 / .5);        /* dashed stitch inside the TOG tag */
  --mm-mark-off:      rgb(0 34 92 / .25);       /* unlit warmth marks */
  --mm-swatch-ring:   rgb(0 34 92 / .18);       /* edge of a print swatch */
  --mm-photo-hatch:   rgb(0 34 92 / .045);      /* hatch on a photo slot still waiting for a photo */

  /* Type */
  --mm-font-head: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mm-font-text: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --mm-fs-display: clamp(2.25rem, 1.693rem + 2.286vw, 3.75rem);   /* 36 -> 60 */
  --mm-fs-h1:      clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem);   /* 30 -> 44 */
  --mm-fs-h2:      clamp(1.5rem, 1.314rem + .762vw, 2rem);        /* 24 -> 32 */
  --mm-fs-h3:      clamp(1.25rem, 1.157rem + .381vw, 1.5rem);     /* 20 -> 24 */
  --mm-fs-body:    clamp(1rem, .977rem + .095vw, 1.0625rem);      /* 16 -> 17 */
  --mm-fs-price:   clamp(1.125rem, 1.032rem + .381vw, 1.375rem);  /* 18 -> 22 */
  --mm-fs-small:   .875rem;
  --mm-fs-label:   .75rem;
  /* Added 17 Oct: sizes the sheets drew off the scale */
  --mm-fs-product:  clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);   /* buy-box H1 28 -> 40 */
  --mm-fs-price-lg: clamp(1.5rem, 1.407rem + .381vw, 1.75rem);    /* buy-box price 24 -> 28 */
  --mm-fs-article:  clamp(1.875rem, 1.457rem + 1.714vw, 3rem);    /* guide H1 30 -> 48 */

  /* Space, 4 px base */
  --mm-s1: 4px;  --mm-s2: 8px;  --mm-s3: 12px;
  --mm-s4: 16px; --mm-s5: 24px; --mm-s6: 32px;
  --mm-s7: 48px; --mm-s8: 64px; --mm-s9: 96px;

  /* Corners and the one shadow */
  --mm-r-xs: 4px;  --mm-r-sm: 6px;
  --mm-r-md: 10px; --mm-r-lg: 16px;
  --mm-shadow: 0 12px 32px -14px rgb(0 34 92 / .3), 0 2px 6px rgb(0 34 92 / .06);
  --mm-shadow-up: 0 -12px 32px -14px rgb(0 34 92 / .3), 0 -2px 6px rgb(0 34 92 / .06);   /* the same shadow cast upward, sticky bar */

  /* Running stitch (round caps) */
  --mm-stitch-w:    2px;
  --mm-stitch-dash: 5px;
  --mm-stitch-gap:  7px;

  /* Motion */
  --mm-ease-sew:  cubic-bezier(.45, .05, .2, 1);
  --mm-ease-soft: cubic-bezier(.3, .1, .2, 1);
  --mm-t-quick:  150ms;  --mm-t-step: 350ms;
  --mm-t-thread: 600ms;  --mm-t-stitch: 1s;
  --mm-t-out:    250ms;  /* drawers closing */

  /* Layout */
  --mm-content: 1312px; --mm-tap: 44px;
  --mm-margin: 16px; --mm-gutter: 12px;
  --mm-header-h: 60px;       /* phone 60, compact 52; computer 88, compact 64 */
  --mm-drawer-w: 440px;
  --mm-sticky-h: 76px;
}
@media (min-width: 600px)  { :root { --mm-margin: 32px; --mm-gutter: 20px; --mm-header-h: 64px; } }
@media (min-width: 1024px) { :root { --mm-margin: 64px; --mm-gutter: 24px; --mm-header-h: 88px; } }