/* ============================================================================
   BaoCut — brand overlay on Adobe Spectrum 2
   Loaded LAST, after every design-system token stylesheet, so overrides win.

   Strategy: keep 100% of Spectrum 2 (neutrals, type, spacing, radii, shadows,
   component classes, state model). Retint ONLY the single accent hue to the
   BaoCut coral — and Spectrum's own `red` scale IS that coral (red-600
   rgb(255,118,101) ≈ the app-icon coral #FC7260), so the accent is remapped to
   Adobe's real red tokens. Everything stays inside the design system.
   ========================================================================== */

:root {
  /* --- Accent = coral: remap the accent ramp onto Spectrum's red scale. -----
     Every --accent-background/content/visual/text alias references
     var(--accent-color-N) at use-time, so this one remap retints the whole
     accent system (buttons, links, focus, badges, selection) coral. */
  --accent-color-100: var(--red-100);
  --accent-color-200: var(--red-200);
  --accent-color-300: var(--red-300);
  --accent-color-400: var(--red-400);
  --accent-color-500: var(--red-500);
  --accent-color-600: var(--red-600);
  --accent-color-700: var(--red-700);
  --accent-color-800: var(--red-800);
  --accent-color-900: var(--red-900);
  --accent-color-1000: var(--red-1000);
  --accent-color-1100: var(--red-1100);
  --accent-color-1200: var(--red-1200);
  --accent-color-1300: var(--red-1300);
  --accent-color-1400: var(--red-1400);
  --accent-color-1500: var(--red-1500);
  --accent-color-1600: var(--red-1600);

  /* Brand focus ring + selection follow the coral accent. */
  --focus-indicator-color: var(--red-800);

  /* --- Literal brand colours (icon-sampled) --------------------------------
     Used ONLY on brand illustration surfaces: hero panel, download band,
     logo lockup glow. This is the Spectrum "illustration/premium gradient"
     exemption, kept deliberately small. */
  --bao-coral-hi: #ff9a74;   /* icon top-light peach   */
  --bao-coral:    #fb6a5e;   /* icon body coral        */
  --bao-coral-lo: #f0603e;   /* scissors / deep coral  */
  --bao-rose:     #fa556a;   /* icon bottom rose       */
  --bao-cream:    #fdf2e0;   /* bun cream              */

  --bao-hero-gradient: linear-gradient(152deg, #ff9d74 0%, #fb6a5e 46%, #f9556b 100%);
  --bao-hero-gradient-soft: linear-gradient(152deg, #ffb094 0%, #fd8577 48%, #fb7082 100%);

  /* Soft coral wash for tinted section bands (stays neutral-adjacent). */
  --bao-wash: color-mix(in oklab, var(--red-500) 12%, var(--surface-base));
  --bao-wash-strong: color-mix(in oklab, var(--red-500) 20%, var(--surface-base));

  /* Marketing rhythm */
  --bao-page-max: 1160px;
  --bao-gutter: clamp(20px, 5vw, 56px);
  --bao-section-y: clamp(64px, 9vw, 128px);
}

/* Dark mode: the hero gradient stays vivid on near-black; the coral wash
   leans a touch deeper so text keeps contrast. */
.spectrum-dark {
  --bao-wash: color-mix(in oklab, var(--red-500) 15%, var(--surface-base));
  --bao-wash-strong: color-mix(in oklab, var(--red-500) 26%, var(--surface-base));
}

::selection { background: color-mix(in oklab, var(--red-500) 40%, transparent); }

/* ============================================================================
   Marketing typography — larger than app UI (16px base), grounded in the
   Spectrum size scale but responsive via clamp().
   ========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.bao-eyebrow {
  font-size: var(--font-size-75);
  font-weight: var(--bold-font-weight);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0;
}

.bao-display {
  font-family: var(--font-family-sans);
  font-weight: var(--black-font-weight);
  color: var(--text-heading);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0;
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  text-wrap: balance;
}

.bao-h2 {
  font-family: var(--font-family-sans);
  font-weight: var(--extra-bold-font-weight);
  color: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  text-wrap: balance;
}

.bao-h3 {
  font-family: var(--font-family-sans);
  font-weight: var(--extra-bold-font-weight);
  color: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}

.bao-lede {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-subdued);
  margin: 0;
  text-wrap: pretty;
}

.bao-coral-text { color: var(--text-accent); }

/* ============================================================================
   Buttons — extend the S2 button vocabulary with a marketing-scale size.
   Same anatomy: pill, bold, 130ms curve, active scale(0.96), 2px focus ring.
   ========================================================================== */
.s2-btn--XXL {
  height: var(--component-height-400);           /* 56px */
  font-size: var(--font-size-300);               /* 18px */
  padding: 0 calc(var(--component-height-400) * 7 / 16);
}

/* A "static white" pill for use on the coral hero/download gradient. */
.s2-btn--on-coral {
  background: #fff;
  color: var(--red-1000);
}
.s2-btn--on-coral:hover:not(:disabled),
.s2-btn--on-coral:active:not(:disabled) { background: var(--bao-cream); }

.s2-btn--ghost-coral {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 var(--border-width-200) rgba(255, 255, 255, 0.55);
}
.s2-btn--ghost-coral:hover:not(:disabled),
.s2-btn--ghost-coral:active:not(:disabled) { background: rgba(255, 255, 255, 0.24); }

/* Buttons carrying an app-store style two-line label. */
.bao-btn-2line { flex-direction: column; gap: 0; line-height: 1.05; }
.bao-btn-2line small { font-weight: var(--regular-font-weight); font-size: 0.68em; opacity: 0.82; }

/* ============================================================================
   Small brand primitives
   ========================================================================== */

/* Coral icon tile used in feature headers / pillars. */
.bao-tile {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--corner-radius-extra-large-default);
  background: var(--bao-wash-strong);
  color: var(--text-accent);
  flex-shrink: 0;
}
.bao-tile .s2-icon { --s2-icon-size: 26px; }

/* Section eyebrow number, e.g. 01 / 02 / 03 */
.bao-num {
  font-weight: var(--black-font-weight);
  font-size: var(--font-size-100);
  letter-spacing: 0.05em;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}

/* Format / feature chip (pill tag) */
.bao-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--text-to-visual-100);
  height: 30px;
  padding: 0 var(--spacing-200);
  border-radius: var(--corner-radius-full);
  background: var(--surface-layer-2);
  border: var(--border-width-100) solid var(--border-default);
  font-size: var(--font-size-75);
  font-weight: var(--medium-font-weight);
  color: var(--text-body);
  white-space: nowrap;
}
.bao-chip .s2-icon { --s2-icon-size: 15px; color: var(--text-subdued); }

/* Decorative icon-mask helper so we can place workflow icons without React. */
.s2-icon { -webkit-mask-size: contain; mask-size: contain; }

/* Sparkle dots echoing the app icon's twinkles — pure CSS, subtle. */
.bao-sparkle {
  position: absolute;
  border-radius: var(--corner-radius-full);
  background: currentColor;
  opacity: 0.9;
  pointer-events: none;
}

/* Speaker avatar (coral→rose initials chip, echoing the icon gradient). */
.bao-av {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--corner-radius-full);
  font-size: 11px; font-weight: var(--bold-font-weight); color: #fff;
  background: linear-gradient(135deg, var(--red-700), var(--pink-800));
  flex-shrink: 0;
}

/* --- Custom icon masks --------------------------------------------------------
   S2 has no sun/moon (theme chrome) or scissors (BaoCut's signature "cut" verb),
   so these three are hand-drawn masks tinted by currentColor like every s2-icon.
   Everything else on the page uses the real S2 workflow icon set. */
.s2-icon--scissors-mask {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='2.7'/><circle cx='6' cy='18' r='2.7'/><line x1='8.4' y1='7.5' x2='20' y2='18'/><line x1='8.4' y1='16.5' x2='20' y2='6'/><line x1='8.4' y1='7.5' x2='13.5' y2='11.2'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='2.7'/><circle cx='6' cy='18' r='2.7'/><line x1='8.4' y1='7.5' x2='20' y2='18'/><line x1='8.4' y1='16.5' x2='20' y2='6'/><line x1='8.4' y1='7.5' x2='13.5' y2='11.2'/></svg>");
}
.s2-icon--sun-mask {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4.3' fill='black' stroke='none'/><line x1='12' y1='1.6' x2='12' y2='4'/><line x1='12' y1='20' x2='12' y2='22.4'/><line x1='1.6' y1='12' x2='4' y2='12'/><line x1='20' y1='12' x2='22.4' y2='12'/><line x1='4.6' y1='4.6' x2='6.3' y2='6.3'/><line x1='17.7' y1='17.7' x2='19.4' y2='19.4'/><line x1='4.6' y1='19.4' x2='6.3' y2='17.7'/><line x1='17.7' y1='6.3' x2='19.4' y2='4.6'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4.3' fill='black' stroke='none'/><line x1='12' y1='1.6' x2='12' y2='4'/><line x1='12' y1='20' x2='12' y2='22.4'/><line x1='1.6' y1='12' x2='4' y2='12'/><line x1='20' y1='12' x2='22.4' y2='12'/><line x1='4.6' y1='4.6' x2='6.3' y2='6.3'/><line x1='17.7' y1='17.7' x2='19.4' y2='19.4'/><line x1='4.6' y1='19.4' x2='6.3' y2='17.7'/><line x1='17.7' y1='6.3' x2='19.4' y2='4.6'/></svg>");
}
.s2-icon--moon-mask {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 12.9A8.6 8.6 0 1 1 11.1 3 6.7 6.7 0 0 0 21 12.9z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 12.9A8.6 8.6 0 1 1 11.1 3 6.7 6.7 0 0 0 21 12.9z'/></svg>");
}

/* Reveal-on-scroll — VISIBLE BY DEFAULT; JS adds .is-in to play an entrance
   only for elements that start below the fold. A failed observer, reduced
   motion, or no-JS therefore never hides anything. */
.bao-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .bao-reveal.is-in { animation: bao-reveal 640ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@keyframes bao-reveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}