/* ============================================================
   Loom — Design Tokens
   The single source of truth. No component file may define a
   raw colour, size or duration; everything references a token.

   Palette derives from the Loom seal: a blush ground (#F7E6DF)
   with the hand-lettered rose script (#E39D9E) and a gold cap.
   Every value used for TEXT is contrast-tested against the
   surface it sits on — see /README.md § Accessibility.
   ============================================================ */

:root {
  /* ---- Brand surfaces -------------------------------------- */
  --blush:        #F7E6DF;   /* the seal's ground */
  --blush-deep:   #F0D8CF;
  --petal:        #FCF3EF;
  --cream:        #FFF9F5;
  --white:        #FFFFFF;

  /* ---- Brand ink ------------------------------------------- */
  --rose:         #E39D9E;   /* the script. Fills and ornament ONLY — never text */
  --rose-soft:    #F1C3C1;
  --rose-deep:    #B5555B;   /* display text   — 3.9:1 on blush (large type only) */
  --rose-ink:     #A3454B;   /* body text, UI  — 4.9:1 on blush, 6.0:1 white-on */
  --gold:         #C9A45C;   /* the cap. Ornament only */
  --gold-soft:    #E6C98A;
  --gold-ink:     #7D5A1C;   /* small gold text — 5.2:1 on blush */
  --ink:          #3B2A2E;   /* 11.1:1 on blush */
  --ink-deep:     #241A1D;   /* dark sections */
  --ink-soft:     #6F565B;   /* secondary text — 5.5:1 on blush */

  /* ---- Semantic ------------------------------------------- */
  --surface:            var(--blush);
  --surface-raised:     var(--cream);
  --surface-sunken:     var(--petal);
  --surface-inverse:    var(--ink-deep);
  --text:               var(--ink);
  --text-muted:         var(--ink-soft);
  --text-on-inverse:    var(--blush);
  --text-accent:        var(--rose-ink);
  --border:             rgba(59, 42, 46, .14);
  --border-strong:      rgba(59, 42, 46, .26);
  --danger:             #A3454B;
  --danger-surface:     #FFF0EF;
  --success:            #7D5A1C;

  /* ---- Optical glass ---------------------------------------
     The product is glass, so the interface is too: translucent
     planes, a light refracted edge, and a soft lens shadow. */
  --glass-fill:     rgba(255, 249, 245, .72);
  --glass-fill-raised: rgba(255, 249, 245, .9);
  --glass-blur:     blur(18px) saturate(140%);
  --glass-edge:     inset 0 1px 0 rgba(255, 255, 255, .7);
  --glass-shadow:   0 10px 30px -18px rgba(59, 42, 46, .35);

  /* ---- Elevation ------------------------------------------- */
  --shadow-1: 0 2px 10px -3px rgba(59, 42, 46, .14);
  --shadow-2: 0 20px 60px -20px rgba(163, 69, 75, .35);
  --shadow-3: 0 50px 90px -40px rgba(163, 69, 75, .45);

  /* ---- Type ------------------------------------------------
     Cormorant for display (luxury e-commerce pairing),
     Montserrat for interface, Pinyon for the wordmark only. */
  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-script:  'Pinyon Script', 'Snell Roundhand', cursive;

  /* Type scale — 1.250 major third, fluid between 390px and 1440px */
  --step--1: clamp(0.80rem, 0.77rem + 0.13vw, 0.875rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.14vw, 1.0625rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.34vw, 1.40rem);
  --step-2:  clamp(1.42rem, 1.26rem + 0.68vw, 1.86rem);
  --step-3:  clamp(1.70rem, 1.41rem + 1.25vw, 2.49rem);
  --step-4:  clamp(2.04rem, 1.53rem + 2.17vw, 3.31rem);
  --step-5:  clamp(2.45rem, 1.59rem + 3.66vw, 4.41rem);
  --step-6:  clamp(2.94rem, 1.53rem + 6.00vw, 5.88rem);

  --leading-tight: 1.04;
  --leading-snug:  1.22;
  --leading-body:  1.65;
  --tracking-wide: .2em;
  --measure: 66ch;

  /* ---- Space — 4px base, standard density ------------------ */
  --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px;
  --space-s:   16px; --space-m:   24px; --space-l:  32px;
  --space-xl:  48px; --space-2xl: 64px; --space-3xl: 96px;
  --space-section: clamp(72px, 10vw, 148px);
  --gutter: clamp(20px, 4vw, 56px);
  --measure-page: 1280px;

  /* ---- Radii ----------------------------------------------- */
  --radius-s: 12px; --radius-m: 20px; --radius-l: 30px;
  --radius-xl: 44px; --radius-pill: 999px;

  /* ---- Motion ----------------------------------------------
     Durations are intentionally different per job: entrances are
     slower than exits, micro-feedback is near-instant. */
  --dur-instant: 120ms;
  --dur-fast:    220ms;
  --dur-base:    360ms;
  --dur-slow:    620ms;
  --dur-reveal:  900ms;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, .02, .24, 1);

  /* ---- Layers ---------------------------------------------- */
  --z-ambient: 1;  --z-product: 3;  --z-content: 5;
  --z-header: 50;  --z-overlay: 70; --z-drawer: 80;
  --z-modal: 90;   --z-toast: 95;   --z-skip: 120;
}