/* ============================================================
   Poudrose — Design Tokens
   Single source of truth for colour, type, space, radius, motion.

   The rule that produces the look: THE CHROME IS MONOCHROME.
   Plaster is the paper, noir is the ink, ONE rose is the action.
   Every other colour in the interface arrives inside a product
   plate — the objects for sale are the palette. If a component
   needs a colour that is not a token here, the component is wrong.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- Plaster ramp (warm neutral, rose undertone) ----------
     Deliberately less pink than a blush: the grid must not tint
     the photography sitting on top of it. */
  --plaster-50:  #FCFAF9;
  --plaster-100: #F6F2F0;
  --plaster-200: #EDE7E5;
  --plaster-300: #E0D8D6;
  --plaster-400: #C4B8B7;
  --plaster-500: #9A8C8C;
  --plaster-600: #6E6162;
  --plaster-700: #4C4243;
  --plaster-800: #2E2729;
  --plaster-900: #1A1517;   /* noir — INK */
  --plaster-950: #0E0A0C;

  /* ---- Rose (the only action colour in the product) ---------
     One value, one job. Never a background for text blocks,
     never a decorative tint, never a second accent. */
  --rose-400: #E8A7B4;
  --rose-500: #D2607A;
  --rose-600: #B93552;   /* ACTION */
  --rose-700: #96253E;
  --rose-800: #6D1A2C;

  /* ---- Semantic — light is the default ---------------------- */
  --paper:        var(--plaster-50);
  --surface:      #FFFFFF;
  --surface-2:    var(--plaster-100);
  --surface-3:    var(--plaster-200);
  --line:         var(--plaster-200);
  --line-strong:  var(--plaster-300);

  --ink:          var(--plaster-900);
  --ink-2:        var(--plaster-700);   /* AA on --paper and --surface-2 */
  --ink-3:        var(--plaster-600);   /* AA on --paper; captions only  */
  --ink-invert:   #FFFFFF;

  --action:       var(--rose-600);
  --action-hover: var(--rose-700);
  --action-ink:   #FFFFFF;
  --action-soft:  #FBEEF1;

  --focus:        var(--rose-700);
  --danger:       #A32A22;
  --sold:         var(--plaster-500);

  /* Scrims live over photography, so they are ink-based, not black */
  --scrim:        rgba(26, 21, 23, .58);
  --scrim-deep:   rgba(14, 10, 12, .86);
  --plate-edge:   rgba(26, 21, 23, .06);   /* hairline so pale plates keep an edge */

  /* ---- Type -------------------------------------------------
     Display is a high-contrast old-style serif: this is a shop
     for objects, and the price should look printed, not shipped.
     UI is a neutral grotesque used almost entirely at small sizes
     with wide tracking — that tracking IS the navigation's voice. */
  --font-display: "Cormorant Garamond", Didot, "Times New Roman", Georgia, serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero:    300 clamp(40px, 9vw, 96px)/1.02 var(--font-display);
  --t-display: 400 clamp(28px, 5vw, 46px)/1.08 var(--font-display);
  --t-title:   500 clamp(20px, 2.4vw, 26px)/1.18 var(--font-display);
  --t-price:   500 17px/1.2 var(--font-display);
  --t-body:    400 15px/1.55 var(--font-ui);
  --t-caption: 400 13px/1.45 var(--font-ui);

  /* The eyebrow: 11px, 600, uppercase, .16em. Used for every nav
     item, category, section label and meta row in the interface. */
  --t-eyebrow: 600 11px/1.1 var(--font-ui);
  --track-eyebrow: .16em;
  --track-wordmark: .28em;

  /* ---- Space (4-based; no in-between values) ---------------- */
  --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;

  /* ---- The grid ---------------------------------------------
     The gutter is the whole argument. Fancy's grid worked because
     the photographs nearly touched: the page reads as one surface
     of objects, not as a row of cards. Anything above ~10px and
     the cards come back. */
  --gutter: 4px;
  --tile-min: 158px;
  --row: 4px;              /* masonry row unit; spans are computed */
  --shell-max: 1680px;

  /* ---- Radius ------------------------------------------------
     Plates are square — a gallery does not round its pictures.
     Only controls are round, and they are fully round. */
  --r-plate: 0px;
  --r-control: 999px;
  --r-panel: 2px;

  /* ---- Elevation --------------------------------------------
     Two shadows exist. Nothing in the grid casts one. */
  --shadow-pop:   0 1px 2px rgba(26, 21, 23, .10), 0 8px 24px rgba(26, 21, 23, .10);
  --shadow-panel: 0 24px 80px rgba(14, 10, 12, .28);

  /* ---- Motion ------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-1: 120ms;
  --d-2: 220ms;
  --d-3: 420ms;

  --header-h: 56px;
  --rail-h: 44px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 8px;
    --tile-min: 220px;
    --header-h: 64px;
  }
}

/* ---- Dark ---------------------------------------------------
   Not an inversion. The paper goes to a dark room and the plates
   keep their own light, so the rose has to lift to stay legible
   on ink. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:       var(--plaster-950);
    --surface:     #161214;
    --surface-2:   #1E181B;
    --surface-3:   #271F23;
    --line:        #2A2226;
    --line-strong: #3A3034;

    --ink:         #F4EFEF;
    --ink-2:       #C6B9BA;
    --ink-3:       #A29496;
    --ink-invert:  var(--plaster-950);

    --action:       var(--rose-500);
    --action-hover: var(--rose-400);
    --action-ink:   var(--plaster-950);
    --action-soft:  #33161F;

    --focus:       var(--rose-400);
    --sold:        var(--plaster-500);

    --plate-edge:  rgba(255, 255, 255, .07);
    --shadow-pop:  0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-panel: 0 24px 80px rgba(0, 0, 0, .7);
  }
}

/* The toggle must beat the media query in both directions, so both
   states are declared explicitly rather than relying on the default. */
:root[data-theme="dark"] {
  --paper:       var(--plaster-950);
  --surface:     #161214;
  --surface-2:   #1E181B;
  --surface-3:   #271F23;
  --line:        #2A2226;
  --line-strong: #3A3034;

  --ink:         #F4EFEF;
  --ink-2:       #C6B9BA;
  --ink-3:       #A29496;
  --ink-invert:  var(--plaster-950);

  --action:       var(--rose-500);
  --action-hover: var(--rose-400);
  --action-ink:   var(--plaster-950);
  --action-soft:  #33161F;

  --focus:       var(--rose-400);
  --sold:        var(--plaster-500);

  --plate-edge:  rgba(255, 255, 255, .07);
  --shadow-pop:  0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-panel: 0 24px 80px rgba(0, 0, 0, .7);
}

:root[data-theme="light"] {
  --paper:       var(--plaster-50);
  --surface:     #FFFFFF;
  --surface-2:   var(--plaster-100);
  --surface-3:   var(--plaster-200);
  --line:        var(--plaster-200);
  --line-strong: var(--plaster-300);

  --ink:         var(--plaster-900);
  --ink-2:       var(--plaster-700);
  --ink-3:       var(--plaster-600);
  --ink-invert:  #FFFFFF;

  --action:       var(--rose-600);
  --action-hover: var(--rose-700);
  --action-ink:   #FFFFFF;
  --action-soft:  #FBEEF1;

  --focus:       var(--rose-700);
  --sold:        var(--plaster-500);

  --plate-edge:  rgba(26, 21, 23, .06);
  --shadow-pop:   0 1px 2px rgba(26, 21, 23, .10), 0 8px 24px rgba(26, 21, 23, .10);
  --shadow-panel: 0 24px 80px rgba(14, 10, 12, .28);
}

/* ============================================================
   Reset — scoped, minimal, and load-bearing.
   The form-control inheritance reset is not optional: without it
   every non-.btn button renders in the UA's black and the
   monochrome-chrome rule breaks in exactly the places nobody
   screenshots.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box }

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;   /* on html: body alone leaves the root scroller untouched */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer }

img, svg { display: block; max-width: 100% }
img { height: auto }

a { color: inherit; text-decoration: none }

:where(h1, h2, h3, h4, p, figure, ul, ol) { margin: 0 }
:where(ul, ol) { padding: 0; list-style: none }

/* One focus ring, everywhere, visible on paper and on photography. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Fields are 16px on coarse pointers or Safari zooms the page. */
@media (pointer: coarse) {
  :where(input, select, textarea) { font-size: 16px }
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}