/* ReelPull web — design tokens
   Brand (NudeTheme "luxury desert") mapped onto the tasteskill colour roles and type steps.
   The palette is kept from the brand (drawn with --keep palette,type); the roles, proportion and
   type ladder follow references/colour.md and references/type.md. */

:root {
  /* ---- colour roles (brand values) ---- */
  --bg: #F0EAE0;            /* ground: the cream page background */
  --surface: #F7F2EA;       /* one tone step from the ground: filled panels, fields, tiles */
  --surface-2: #FFFFFF;     /* white: hero content cards */
  --field: #EAE2D6;         /* a second, darker tone step: section fields */
  --ink: #2E2018;           /* main text and the strongest marks (deep espresso) */
  --muted: #6B5A4E;         /* secondary text; passes 4.5:1 on --bg */
  --accent: #3B2A20;        /* the one accent: the CTA */
  --accent-hover: #4E382C;
  --accent-ink: #F5F0E8;    /* text on the accent */
  --terracotta: #D48166;    /* brand secondary accent (DESIGN.md "outline"); used sparingly */
  --error: #B3422E;
  --success: #3E6B44;

  /* dark-field variants: for the espresso hero and CTA grounds */
  --ink-ground: #2E2018;
  --ink-ground-2: #3B2A20;  /* a lighter step on the dark field */
  --on-ink: #F0EAE0;        /* primary text on the dark field */
  --on-ink-muted: #A89686;  /* secondary text on the dark field; passes 4.5:1 on #2E2018 */

  /* ---- type (brand faces: one family, Outfit) ---- */
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14px captions, legal */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17–19px paragraphs */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);      /* 20–26px supporting line */
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);             /* 32–64px section headings */
  --step-display: clamp(3rem, 1rem + 9vw, 9rem);              /* hero, set by the blueprint */

  /* ---- space ---- */
  --margin: clamp(1.25rem, 4vw, 2.25rem);   /* page side margin */
  --gutter: clamp(1rem, 2vw, 2rem);         /* column gap */
  --section: clamp(5rem, 12vw, 13rem);      /* space between sections */

  /* ---- shape ---- */
  --radius: 0px;            /* page surfaces and photographic media: square, decided once */
  --radius-pill: 999px;     /* buttons: fully round (brand pill CTA), decided once */
  --app-radius: 16px;       /* the product's own UI radius, used inside data-ui fragments */

  /* ---- motion (references/motion.md) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}