/* =========================================================================
   DESIGN TOKENS. The single source of truth. DESIGN.md explains each one.
   Look: an atelier's printed catalogue. Paper, brown ink, small engraved
   capitals, Caslon, and photographs that melt into the page.
   ========================================================================= */

:root {
  /* ---- Ink & paper --------------------------------------------------- */
  --paper:        #F7F4EF;  /* page */
  --paper-raised: #FBF9F6;  /* sheets, menus, fields: a slightly whiter sheet laid on top */
  --ink:          #644530;  /* every word, line and icon */

  /* ---- Your palette: stockings + photo backdrops ---------------------- */
  --cranberry:   #9E2837;
  --mulled-wine: #61131D;
  --sage:        #75785C;
  --fir:         #3A3E19;
  --candlelight: #E0BE80;
  --rosehip:     #E8B3C0;
  --frost:       #D1EBEC;
  --berry:       #BE4650;
  --linen:       #EBEAE9;

  /* ---- Colour roles --------------------------------------------------- */
  --bg:             var(--paper);
  --surface:        var(--paper-raised);
  --text:           var(--ink);
  --text-secondary: color-mix(in srgb, var(--ink) 72%, var(--paper));
  --text-tertiary:  color-mix(in srgb, var(--ink) 48%, var(--paper));
  --line:           color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong:    color-mix(in srgb, var(--ink) 38%, transparent);
  --fill-hover:     color-mix(in srgb, var(--ink) 6%, transparent);
  --scrim:          color-mix(in srgb, #2b1d14 34%, transparent);
  --focus-ring:     0 0 0 2px var(--bg), 0 0 0 3px var(--ink);

  /* ---- Photo backdrops (the "studio paper" behind each product) -------
     Each gift gets one, in turn. center → edge gives the soft vignette.  */
  --bd-1: #CCD9DE; --bd-1-edge: #8EA5B2;   /* frost blue  */
  --bd-2: #EBD5D2; --bd-2-edge: #C49A97;   /* rosehip     */
  --bd-3: #EDE0C6; --bd-3-edge: #C6AC7C;   /* candlelight */
  --bd-4: #DCDDCF; --bd-4-edge: #A2A68A;   /* sage        */
  --photo-fade: 62%;    /* where the edge fade starts (smaller = softer, more fade) */
  --photo-pad:  18%;    /* room around a cut-out product */

  /* ---- Type ------------------------------------------------------------
     Labels  = Montserrat, standing in for Sweet Sans (engraved capitals).
     Reading = Libre Caslon Text, standing in for Caslon.
     Script  = Pinyon Script (wordmark), Dancing Script (stocking stitching). */
  --font-label:  "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-serif:  "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  --font-form:   var(--font-label);   /* pop-up form text: same family as labels, regular weight, normal case */
  --font-stitch: "Dancing Script", "Snell Roundhand", cursive;

  --label-size:     11px;     /* every uppercase label, nav item and button */
  --label-size-sm:  10px;     /* badges, tiny meta */
  --label-weight:   600;
  --label-tracking: 0.16em;

  --fs-caption: 13px;  --lh-caption: 18px;   /* italic captions */
  --fs-body:    16px;  --lh-body:    26px;   /* reading text, fields */
  --fs-lead:    19px;  --lh-lead:    30px;   /* centred intro paragraphs */
  --fs-title:   clamp(32px, 4.6vw, 52px);  --lh-title: 1.1;   /* page titles */
  --fs-wordmark: clamp(40px, 4vw, 52px);

  /* ---- Space: 8pt ------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---- Grid ------------------------------------------------------------ */
  --grid-columns: 12;
  --grid-gutter:  24px;
  --grid-margin:  80px;
  --grid-max:     1120px;
  --measure:      560px;   /* max width of centred reading text */

  /* ---- Shape ----------------------------------------------------------- */
  --r-xs:   4px;     /* gift tiles */
  --r-sm:   8px;     /* menus, dropdown lists */
  --r-md:   12px;    /* sheets */
  --r-pill: 999px;   /* the one filled button, toasts, seals */
  --stroke-dotted: 1.5px;
  --shadow-float: 0 18px 50px -12px color-mix(in srgb, #2b1d14 28%, transparent),
                  0 0 0 1px var(--line);

  --z-sticky: 40; --z-menu: 60; --z-toast: 200;

  /* ---- Sizes ----------------------------------------------------------- */
  --control:    40px;
  --control-lg: 48px;
  --icon-sm:    14px;
  --icon:       18px;
  --header-h:   112px;
  --localnav-h: 48px;

  /* ---- Cursor ---------------------------------------------------------- */
  --cursor-action:   pointer;
  --cursor-text:     text;
  --cursor-drag:     grab;
  --cursor-dragging: grabbing;
  --cursor-disabled: not-allowed;

  /* ---- Motion: slow, quick, slow --------------------------------------- */
  --ease:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:  200ms;   /* colour, underline */
  --dur-2:  360ms;   /* menus, dropdowns */
  --dur-3:  600ms;   /* sheets, content entering, photo hover */
  --dur-4:  1400ms;  /* ambient: stocking swing, jar shake */
  --stagger: 60ms;
}

@media (max-width: 1127px) { :root { --grid-margin: 40px; } }
@media (max-width: 743px)  {
  :root { --grid-margin: 20px; --grid-columns: 4; --grid-gutter: 16px; --header-h: 72px; --fs-lead: 17px; --lh-lead: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --stagger: 0ms; }
}