/* lil guys / lil couple — design tokens for web
 *
 * Extracted from the shipping iOS asset catalogs, develop @ 16b2fd5 (2026-07-22).
 * Scope a page with [data-app="lil-guys"] or [data-app="lil-couple"].
 * Light/dark follow the system via prefers-color-scheme.
 */

:root {
  /* spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* shape */
  --radius: 20px;
  --border-width: 1px;

  /* type — SF Pro on Apple platforms, Inter 900 is the closest web substitute */
  --font-sans: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;

  --text-display:   42px; --tracking-display:   -1.8px;
  --text-headline-l:38px; --tracking-headline-l:-1.6px;
  --text-headline-m:32px; --tracking-headline-m:-1.0px;
  --text-title:     30px; --tracking-title:     -1.0px;
  --text-subhead:   28px; --tracking-subhead:   -0.8px;
  --text-body-l:    17px; --tracking-body-l:    -0.43px;
  --text-body:      15px;
  --text-body-s:    14px;
  --text-caption:   12px;
  --text-eyebrow:   11px; --tracking-eyebrow:    2px;

  --weight-black: 900;
  --weight-heavy: 800;
  --weight-bold:  700;

  /* status — shared by both apps, both appearances */
  --success: #10B981;
  --error:   #E04F3F;
}

/* ---------- lil couple — rose-red ---------- */

[data-app="lil-couple"] {
  --background:  #FBF5F4;
  --surface:     #FFFFFF;
  --ink:         #1D1518;
  --muted:       #756668;
  --primary:     #C9184A;
  --primary-ink: #FFFFFF;
  --accent:      #F4785F;
  --accent-ink:  #FFFFFF;
  --chip:        #F6EBEC;
  --border:      #E9DEDF;
  --success:     #10B981;
  --error:       #E04F3F;
}

@media (prefers-color-scheme: dark) {
  [data-app="lil-couple"] {
    --background:  #140E12;
    --surface:     #1E161B;
    --ink:         #F8F3F2;
    --muted:       #A79A9E;
    --primary:     #FF4D6D;
    --accent:      #FF8E70;
    --chip:        #271D23;
    --border:      #332A2F;
    --success:     #35CB95;
    --error:       #F47165;
  }
}

/* ---------- lil guys — teal ---------- */

[data-app="lil-guys"] {
  --background:  #F5F9F5;
  --surface:     #FFFFFF;
  --ink:         #1A1A1A;
  --muted:       #6B6B6B;
  --primary:     #0D9488;
  --primary-ink: #FFFFFF;
  --accent:      #FB7185;
  --accent-ink:  #FFFFFF;
  --chip:        #EDF4EF;
  --border:      #E5E5EA;
  --success:     #10B981;
  --error:       #E04F3F;
}

@media (prefers-color-scheme: dark) {
  [data-app="lil-guys"] {
    --background:  #0E1410;
    --surface:     #17171C;
    --ink:         #F5F5F7;
    --muted:       #9A9AA3;
    --primary:     #14B8A6;
    --accent:      #FF8A99;
    --chip:        #1A221E;
    --border:      #2A2A30;
    --success:     #35CB95;
    --error:       #F47165;
  }
}

/* ---------- signature treatments ---------- */

/* The ambient backdrop every screen sits on. Two soft radial blobs over the
   base color: primary upper-left at 18%, accent lower-right at 20%. */
.ambient {
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 55%),
    var(--background);
}

/* Paywall mood — same blobs at double strength. */
.ambient--emphasis {
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--primary) 36%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%,
      color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 55%),
    var(--background);
}

/* Liquid Glass approximation. Only reads correctly over .ambient — never
   place it on a flat fill. */
.glass {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: var(--border-width) solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius);
}

.glass--circle { border-radius: 50%; }
.glass--tinted { background: color-mix(in srgb, var(--primary) 22%, transparent); }

/* Primary CTA — full-width capsule, solid brand fill, white sheen wash
   top-to-bottom, colored glow shadow. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 0 var(--space-lg);
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-body-l);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-body-l);
  text-transform: lowercase;
  color: var(--primary-ink);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    var(--primary);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform 0.08s linear;
  cursor: pointer;
}

.cta:active { transform: scale(0.97); }
.cta:disabled { opacity: 0.5; cursor: default; }

.cta--secondary {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

/* Hero headline — two lines, last word in brand color, tight tracking. */
.hero {
  font-family: var(--font-sans);
  font-size: var(--text-headline-l);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-headline-l);
  line-height: 1.05;
  text-transform: lowercase;
  color: var(--ink);
}

.hero em { font-style: normal; color: var(--primary); }

/* Uppercase section label — the one place capitals are used. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

/* Wordmark — lowercase, trailing period in brand color. */
.wordmark {
  font-family: var(--font-sans);
  font-size: var(--text-title);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-title);
  text-transform: lowercase;
  color: var(--ink);
}

.wordmark span { color: var(--primary); }