:root {
  /* Color */
  --cp-page: #F3F4F1;
  --cp-sheet: #FFFFFF;
  --cp-ink: #141414;
  --cp-amber: #FFA42D;
  --cp-amber-soft: #FFE3BD;
  --cp-graphite: #5A5D58;
  /* Muted body text on the ink bands. --cp-graphite is a light-surface token and
     only reaches 2.76:1 on --cp-ink; this one is 7.04:1 on #141414 and 6.38:1 on
     the #1E1E1D photo slots. */
  --cp-graphite-on-dark: #9EA19B;
  /* Amber is a fill, not a text colour: --cp-amber is 1.9:1 on white. This is the
     amber that can carry text — 5.2:1 on --cp-sheet, for links and inline accents. */
  --cp-amber-ink: #C45A00;
  /* The wash behind a product photo while it loads and inside an empty image slot.
     A surface, never a text colour: --cp-ink reads 15.66:1 on it. */
  --cp-slot: #ECEDE8;
  /* Same job on the dark bands — the photo slots on the lamp landing.
     --cp-graphite-on-dark is 6.38:1 on it, --cp-sheet at 72% is 9.17:1. */
  --cp-slot-dark: #1E1E1D;
  /* The paper the story stage's delivery scene is drawn on. Surface only:
     --cp-ink is 17.16:1 on it. */
  --cp-stage-wash: #F7F7F4;
  /* The grid the blueprint scene is ruled with, on --cp-stage-wash. Decorative, not
     information: 1.18:1 on that wash by design, so nothing is encoded in it alone. */
  --cp-stage-rule: #E4E5E0;
  /* The dashed placeholder slot on the lamp landing and its dashed border. The border is
     2.29:1 on the fill — a boundary, not text, and the slot's own label is --cp-ink. */
  --cp-slot-wash: #EAEBE7;
  --cp-slot-edge: #9A9D97;
  /* Error and required-field red. 6.54:1 on --cp-sheet and 5.92:1 on --cp-page, so it
     clears AA for body text on both surfaces it is used on. */
  --cp-danger: #B3261E;
  /* The sticky header's frosted fill: --cp-page at 92% over whatever scrolls under it. */
  --cp-page-veil: rgb(243 244 241 / 0.92);
  /* Text and rules on the ink bands, where --cp-sheet at full strength is too loud.
     On --cp-ink: body 9.81:1, quiet 6.39:1, edge 3.83:1 (a border, never text). */
  --cp-sheet-body: rgb(255 255 255 / 0.72);
  --cp-sheet-quiet: rgb(255 255 255 / 0.56);
  --cp-sheet-edge: rgb(255 255 255 / 0.4);

  --cp-line: #D9DBD5;
  --cp-line-dark: rgb(255 255 255 / 0.16);
  --cp-ink-soft: #1F1F1E;

  /* Type */
  --cp-font-display: 'Anton', 'Impact', sans-serif;
  --cp-font-body: 'Space Grotesk', system-ui, sans-serif;
  /* The floor for anything a customer types into. Below 16px iOS Safari zooms the
     viewport when the field takes focus and then leaves it zoomed, which on a checkout
     reads as the page breaking — REQ-22, QA F-08/F-10. `max()` and not a flat 1rem so a
     design that wants a larger control still gets one. Carries no colour, so it has no
     contrast ratio of its own. */
  --cp-control-font-min: max(1rem, var(--cp-text-sm));
  /* The smallest a tap target may be, per the 44px guidance the QA measured against. */
  --cp-control-target-min: 2.75rem;

  --cp-text-xs: 0.8125rem;
  --cp-text-sm: 0.9375rem;
  --cp-text-md: 1.0625rem;
  --cp-text-lg: 1.3125rem;
  --cp-text-xl: 1.625rem;
  --cp-display-md: clamp(2.5rem, 5vw, 4.25rem);
  --cp-display-lg: clamp(3.25rem, 6.6vw, 6.25rem);

  /* Space */
  --cp-space-2xs: 0.375rem;
  --cp-space-xs: 0.625rem;
  --cp-space-sm: 1rem;
  --cp-space-md: 1.5rem;
  --cp-space-lg: 2.5rem;
  --cp-space-xl: 4rem;
  --cp-space-2xl: clamp(4.5rem, 9vw, 8rem);

  /* Borders — the brand is square; a radius needs a real-world reason (a chat bubble,
     a pill counter, a round swatch), never decoration. */
  --cp-border-hair: 1px;
  --cp-border: 2px;
  --cp-radius-bubble: 14px;
  --cp-radius-pill: 999px;
  --cp-radius-circle: 50%;

  /* Layout */
  --cp-container: 82rem;
  --cp-gutter: clamp(1rem, 3.5vw, 2.5rem);
  --cp-header-height: 4.5rem;
  --cp-frame: 3px;

  /* Motion */
  --cp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cp-duration: 180ms;
}