/* ============================================================
   CHERRYPiQ Venue Onboarding v5 — token bridge
   Re-skins the design-handoff prototype onto the portal brand:
   - Typeface: DM Sans / DM Serif Display (loaded in the HTML head),
     replacing the prototype's Gilroy.
   - Primary: #F11740 (current CHERRYPiQ red), replacing the handoff's
     #E62242 cherry scale.
   - Light theme + warm-ink neutrals + leaf green are kept from the
     handoff design system (Lauran's call: light, match prototype).
   Structural screen classes live in the HTML <style> block (ported as-is).
   ============================================================ */

:root {
  /* ── Cherry — primary brand red, rebased to #F11740 ── */
  --cherry-50:  #FEE7EB;
  --cherry-100: #FCC4CE;
  --cherry-200: #F992A4;
  --cherry-300: #F65F79;
  --cherry-400: #F33C5C;
  --cherry-500: #F11740;  /* PRIMARY — the CHERRYPiQ red */
  --cherry-600: #D1052E;
  --cherry-700: #A80425;
  --cherry-800: #79031A;
  --cherry-900: #4D0210;

  /* ── Leaf — secondary brand green (unchanged; already #4BAD33 in app) ── */
  --leaf-50:  #EAF6E6;
  --leaf-100: #C8E8BD;
  --leaf-200: #9BD589;
  --leaf-300: #6FC257;
  --leaf-400: #4BAD33;
  --leaf-500: #3E9329;
  --leaf-600: #327620;
  --leaf-700: #265918;
  --leaf-800: #1A3D10;
  --leaf-900: #0F2409;

  /* ── Neutrals — warm-tinged charcoal to off-white (kept) ── */
  --ink-900: #161214;
  --ink-800: #241E21;
  --ink-700: #3A3236;
  --ink-600: #564C51;
  --ink-500: #7A6F74;
  --ink-400: #A39A9E;
  --ink-300: #C8C1C4;
  --ink-200: #E4DFE1;
  --ink-100: #F2EFF0;
  --ink-50:  #FAF8F9;
  --white:   #FFFFFF;

  /* ── Semantic tokens ── */
  --color-primary:        var(--cherry-500);
  --color-primary-hover:   var(--cherry-600);
  --color-primary-press:   var(--cherry-700);
  --color-primary-soft:    var(--cherry-50);
  --color-secondary:       var(--leaf-400);
  --color-secondary-hover: var(--leaf-500);
  --color-secondary-soft:  var(--leaf-50);

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-500);
  --fg-on-primary: var(--white);

  --bg-1: var(--white);
  --bg-2: var(--ink-50);
  --bg-3: var(--ink-100);
  --bg-inverse: var(--ink-900);

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-400);

  --success: var(--leaf-400);
  --warning: #F2A33C;
  --danger:  var(--cherry-500);
  --info:    #2F7BD6;

  /* ── Type — DM Sans throughout (Lauran: keep DM Sans, not Gilroy) ── */
  --font-display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-heavy: 900;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ── Radii / shadow / spacing (kept from handoff system) ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22,18,20,0.06), 0 1px 3px rgba(22,18,20,0.08);
  --shadow-md: 0 4px 12px rgba(22,18,20,0.08), 0 2px 4px rgba(22,18,20,0.06);
  --shadow-lg: 0 12px 32px rgba(22,18,20,0.12), 0 4px 8px rgba(22,18,20,0.06);
  --shadow-cherry: 0 8px 22px rgba(241,23,64,0.30);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* ── Semantic type classes (from the handoff system; family now DM Sans) ── */
.cpq-display { font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-6xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h1, .cpq-h1 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-4xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h2, .cpq-h2 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h3, .cpq-h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--fg-1); }
h4, .cpq-h4 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-1); }
.cpq-lead { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-2); }
p, .cpq-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); }
.cpq-small { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); }
.cpq-overline { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-primary); }
.cpq-mono, code { font-family: var(--font-mono); font-size: 0.92em; }

/* ── OTP gate (Phase 2) — real code input + inline error ── */
.otp-codeinput {
  display: block; width: 100%; margin: 4px 0 6px;
  padding: 14px 16px;
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  text-align: center; letter-spacing: 0.5em; text-indent: 0.5em;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1.5px solid var(--border-1); border-radius: var(--radius-md);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.otp-codeinput:focus { border-color: var(--cherry-500); box-shadow: 0 0 0 3px var(--cherry-50); background: var(--white); }
.otp-codeinput::placeholder { color: var(--ink-300); letter-spacing: 0.35em; }
.otp-err { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--danger); }