/* ============================================================================
   Peptide Portal retail — design tokens
   Layout, radii, spacing and motion are the values measured from
   peptideportal.xyz on 2026-08-25 (recon/tokens.json) and must not drift.
   Colour and type were rebranded 2026-10-30 to the Peptide Portal identity:
   brand orange #DC4920 and cream #F5F3EF from brand/logo-*.svg, warm neutrals
   to match, and the portal app's system font stack (--app-font-sans).
   ============================================================================ */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --dp-ink:            #2E241E;            /* rgb(72,53,44)   — primary text, 32 uses  */
  --dp-ink-60:         rgba(46, 36, 30, .6);
  --dp-ink-50:         rgba(46, 36, 30, .5);
  --dp-blue:           #DC4920;            /* rgb(230,70,26)  — brand accent + CTA     */
  --dp-muted:          #A19A93;            /* rgb(147,148,161)                          */
  --dp-alert:          #FF3D49;            /* rgb(255,61,73)  — "(Required)", "Exit"    */
  --dp-slate:          #57504A;

  --dp-on-dark:        #FFFFFF;
  --dp-on-dark-90:     rgba(255, 255, 255, .9);
  --dp-on-dark-85:     rgba(255, 255, 255, .85);
  --dp-on-dark-80:     rgba(255, 255, 255, .8);
  --dp-scrim:          rgba(0, 0, 0, .3);   /* photo-card text scrim */

  /* --- Surfaces ---------------------------------------------------------- */
  --dp-surface:        #FFFFFF;            /* panels                     */
  --dp-surface-alt:    #FAF8F5;            /* announcement strip, bands  */
  --dp-surface-card:   #F5F3EF;            /* page ground behind panels  */
  --dp-surface-mute:   #F3F0EC;
  --dp-hairline:       rgba(162, 159, 159, .2);

  /* --- Radii -------------------------------------------------------------
     100px pills dominate (14 uses). The large values (90/70/32/30) are the
     panel corners that give DP its soft Framer character — never flatten. */
  --dp-r-pill:  100px;
  --dp-r-2xl:    90px;
  --dp-r-xl:     70px;
  --dp-r-lg:     32px;
  --dp-r-md:     30px;
  --dp-r-sm:     24px;
  --dp-r-xs:     20px;
  --dp-r-2xs:    16px;
  --dp-r-3xs:    12px;
  --dp-r-4xs:    10px;

  /* --- Type --------------------------------------------------------------
     Peptide Portal uses the platform system stack (SF Pro / Segoe / Roboto),
     matching the portal app (--app-font-sans in the portal's index.css).
     Framer reports interpolated weights (599/499) from a variable axis; those
     are normalised to 600/500 here. */
  --dp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Figures and micro-labels in the purchase UI set in the lab register. */
  --dp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --dp-fs-display: 44px;   /* /600 — hero                    */
  --dp-fs-h2:      24px;   /* /600 — section heads           */
  --dp-fs-h3:      20px;   /* /600 — card heads              */
  --dp-fs-h4:      18px;   /* /600                           */
  --dp-fs-lg:      16px;   /* /400 /500 /600 — body + labels */
  --dp-fs-md:      15px;   /* /400 /600                      */
  --dp-fs-base:    14px;   /* /400 /500 /600 — dominant body */
  --dp-fs-sm:      12px;   /* /400 /600 — CAS, small print   */
  --dp-fs-xs:      11px;   /* /500 — legal                   */

  --dp-fw-regular: 400;
  --dp-fw-medium:  500;
  --dp-fw-semi:    600;
  --dp-fw-bold:    700;

  /* --- Spacing scale (measured frequency order) -------------------------- */
  --dp-s-1:   4px;
  --dp-s-2:   6px;
  --dp-s-3:   8px;
  --dp-s-4:  10px;
  --dp-s-5:  12px;
  --dp-s-6:  14px;
  --dp-s-7:  16px;   /* most common */
  --dp-s-8:  17px;
  --dp-s-9:  20px;
  --dp-s-10: 24px;
  --dp-s-11: 28px;
  --dp-s-12: 36px;

  /* --- Motion ------------------------------------------------------------
     --dp-ease-cta / --dp-t-cta are FITTED to DP's measured CTA hover: badge x
     travelled 128.4 -> 227.5 over ~350ms reaching 92% at 260ms, which matches
     cubic-bezier(.4,0,.2,1) closely. Do not "round" these to ease/300ms.
     --dp-ease-rot is Ideal GLPs' rotator easing, per the brief. */
  --dp-ease-cta: cubic-bezier(.4, 0, .2, 1);
  --dp-t-cta:    .35s;
  --dp-ease-rot: cubic-bezier(.16, 1, .3, 1);
  --dp-t-rot:    .5s;

  /* --- Layout ------------------------------------------------------------ */
  --dp-maxw:      1440px;
  --dp-gutter:   40px;    /* one shared side gutter; sections run gutter-to-gutter */
  --dp-content:  1200px;
  --dp-strip-h:   0px;    /* announcement strip removed */

  /* Hairlines DP outlines its boxes with — sampled from the rendered pixels, because the
     element inspector reports no border on these at all. */
  --dp-hair-row:   #F5F3F0;   /* FAQ rows */
  --dp-hair-panel: #F0EDE9;   /* FAQ panel */
  --dp-step-bg:    #E3DFD9;   /* process card fill behind the photo */

  /* Footer mark. DP renders 25x29; doubled at the client's request. The footer contact
     column is offset by --dp-foot-mark-h, so these two move together. */
  --dp-foot-mark-w: 200px;
  --dp-foot-mark-h: 28px;
  --dp-header-h:  37px;   /* header band height */
}