/* ============================================================
   Yomee Design Tokens — colors & type
   Source of truth: Yomee-New.fig (Onboarding page)
   ============================================================ */

/* --- Webfonts (Google Fonts) ---
   Onest covers UI body text. Geist Mono is the brand voice — used for
   headings, buttons (uppercase tracking) and form text.
*/
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700;900&family=Geist+Mono:wght@300;400;500;700;800&display=swap");

:root {
  /* ---------- COLOR — base palette ---------- */
  /* Surfaces */
  --yo-bg:            rgb(245, 240, 235);  /* warm cream — primary app background */
  --yo-bg-alt:        rgb(241, 232, 222);  /* slightly deeper cream */
  --yo-surface:       rgb(255, 255, 255);  /* card / input surface */
  --yo-surface-2:     rgb(252, 252, 252);

  /* Ink (foreground) */
  --yo-ink:           rgb(51, 51, 51);     /* primary text + button bg (#333) */
  --yo-ink-strong:    rgb(26, 24, 24);     /* near-black for icon strokes */
  --yo-ink-pure:      rgb(0, 0, 0);
  --yo-ink-muted:     rgb(78, 78, 78);
  --yo-on-ink:        rgb(255, 255, 255);  /* text on dark button */

  /* Brand greens (forest family — primary brand identity) */
  --yo-forest-900:    rgb(18, 55, 41);     /* deepest forest */
  --yo-forest-700:    rgb(25, 85, 62);     /* hero forest */
  --yo-forest-500:    rgb(57, 135, 105);   /* mid forest */
  --yo-forest-400:    rgb(69, 158, 113);

  /* Accent greens (mint family — energy / "go" CTAs / progress) */
  --yo-mint-700:      rgb(55, 183, 139);   /* progress bar, accent CTA */
  --yo-mint-500:      rgb(69, 196, 152);   /* shapes / illustration */
  --yo-mint-300:      rgb(143, 215, 178);  /* tints */

  /* Lavender (reiniciador archetype accent — provisional, flagged for review) */
  --yo-lavender:      #B79EE0;

  /* Warmth (warning / highlight) */
  --yo-yellow:        rgb(255, 242, 0);    /* highlighter yellow */
  --yo-yellow-soft:   rgb(255, 239, 143);
  --yo-orange:        rgb(245, 88, 31);    /* primary warm accent */
  --yo-orange-soft:   rgb(249, 141, 37);
  --yo-orange-deep:   rgb(79, 42, 15);

  /* Alert / negative */
  --yo-coral:         rgb(247, 108, 114);  /* used for "$ in interest" / cost */
  --yo-coral-soft:    rgb(255, 132, 134);
  --yo-red:           rgb(235, 92, 98);
  --yo-red-strong:    rgb(220, 64, 70);
  --yo-red-deep:      rgb(178, 18, 18);

  /* Bank brand markers (used in file rows) */
  --yo-bank-bbva:     rgba(0, 20, 145, 0.7);
  --yo-bank-nu:       rgba(131, 10, 209, 0.7);

  /* Hairlines / dividers */
  --yo-line:          rgb(51, 51, 51);
  --yo-line-soft:     rgb(209, 211, 217);

  /* Shadow */
  --yo-shadow-sm:     0 4px 4px 0 rgba(0,0,0,0.25);

  /* ---------- COLOR — semantic ---------- */
  --color-bg:                 var(--yo-bg);
  --color-surface:            var(--yo-surface);
  --color-fg:                 var(--yo-ink);
  --color-fg-muted:           var(--yo-ink-muted);
  --color-fg-inverse:         var(--yo-on-ink);
  --color-brand:              var(--yo-forest-700);
  --color-accent:             var(--yo-mint-700);
  --color-cost:               var(--yo-coral);   /* used to indicate $ lost */
  --color-savings:            var(--yo-mint-700);/* used to indicate $ gained */
  --color-warn:               var(--yo-orange);
  --color-error:              var(--yo-red-strong);
  --color-border:             var(--yo-line);
  --color-button-primary-bg:  var(--yo-ink);
  --color-button-primary-fg:  var(--yo-on-ink);
  --color-button-accent-bg:   var(--yo-mint-700);
  --color-button-accent-fg:   var(--yo-on-ink);

  /* ---------- TYPE — families ---------- */
  --font-display: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- TYPE — scale (mobile, 390px) ---------- */
  /* h0/hero — 28pt Geist Mono Medium, often centered */
  --type-h0-size:        28px;
  --type-h0-line:        36px;
  --type-h0-weight:      500;
  --type-h0-tracking:    0;

  /* h1 — same as h0 but bold (used for "No pierdas ni un peso más") */
  --type-h1-size:        28px;
  --type-h1-line:        36px;
  --type-h1-weight:      700;

  /* h2 — 24px Geist Mono Medium / Bold for inner emphasis */
  --type-h2-size:        24px;
  --type-h2-line:        36px;
  --type-h2-weight:      700;

  /* Body — 16px Onest Regular, +0.04em */
  --type-body-size:      16px;
  --type-body-line:      24px;
  --type-body-weight:    400;
  --type-body-tracking:  0.04em;

  /* Body strong — Onest Bold */
  --type-body-strong-weight: 700;

  /* Button label / mono caps — 14px Geist Mono Bold, +0.10em */
  --type-button-size:        14px;
  --type-button-line:        22px;
  --type-button-weight:      700;
  --type-button-tracking:    0.10em;

  /* Input / placeholder — 12px Geist Mono Light, +0.10em */
  --type-input-size:         12px;
  --type-input-line:         20px;
  --type-input-weight:       300;
  --type-input-tracking:     0.10em;

  /* Caption — 12px Geist Mono Light */
  --type-caption-size:       12px;
  --type-caption-line:       20px;
  --type-caption-weight:     300;
  --type-caption-tracking:   0.10em;

  /* Number / metric — 24-44px Geist Mono Bold */
  --type-metric-size:        44px;
  --type-metric-line:        48px;
  --type-metric-weight:      700;

  /* ---------- TYPE — archetype reveal surface only ----------
     Used by ArchetypeScreen + DiagnosticScreen (4 archetype reveals:
     totalero, optimizador, escalador, reiniciador). Do NOT reuse on
     other surfaces — names are intentionally semantic.

     Flagged decisions (see brief):
       • label family = Geist Mono Bold (matches what actually renders).
       • line-height = 32px on the 28px display sizes (1.14× — safe ratio
         that doesn't clip descenders). Override to 24px if the tight
         spec ratio is intentional.
       • headline + body kept as two distinct tokens; collapse if the
         intent was a single Onest Bold 20/24 token.
  */

  /* 1. Opening exclamation — "¡Vas bien!", "¡Excelente!", "¡Atención!" */
  --type-archetype-exclamation-family:    var(--font-display);
  --type-archetype-exclamation-weight:    700;
  --type-archetype-exclamation-size:      28px;
  --type-archetype-exclamation-line:      32px;
  --type-archetype-exclamation-tracking:  0.04em;

  /* 2. Archetype label — "Eres un Optimizador" (color from --profile-*) */
  --type-archetype-label-family:    var(--font-display);
  --type-archetype-label-weight:    700;
  --type-archetype-label-size:      28px;
  --type-archetype-label-line:      32px;
  --type-archetype-label-tracking:  0.04em;

  /* 3. Headline — bold 2-line statement under the label */
  --type-archetype-headline-family:    var(--font-body);
  --type-archetype-headline-weight:    700;
  --type-archetype-headline-size:      20px;
  --type-archetype-headline-line:      24px;
  --type-archetype-headline-tracking:  0.04em;

  /* 4. Body — supporting paragraph below the headline */
  --type-archetype-body-family:    var(--font-body);
  --type-archetype-body-weight:    400;
  --type-archetype-body-size:      14px;
  --type-archetype-body-line:      20px;
  --type-archetype-body-tracking:  0.02em;
  --type-archetype-body-max-width: 280px;

  /* Per-archetype accent (consumed by --type-archetype-label color) */
  --profile-totalero:    var(--yo-mint-700);
  --profile-optimizador: var(--yo-orange-soft);
  --profile-escalador:   var(--yo-coral);
  --profile-reiniciador: var(--yo-lavender);

  /* ---------- SHAPE ---------- */
  --radius-input:   16px;   /* fields, buttons */
  --radius-card:    28px;   /* large hero cards */
  --radius-pill:    999px;
  --stroke:         1px;
  --stroke-strong:  2px;

  /* ---------- LAYOUT ---------- */
  --device-w:       390px;
  --device-h:       844px;
  --gutter:         24px;
}

/* ============================================================
   Semantic element styles — drop-in defaults
   ============================================================ */

html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .yo-h1 {
  font-family: var(--font-display);
  font-weight: var(--type-h1-weight);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: 0;
  margin: 0;
}

h2, .yo-h2 {
  font-family: var(--font-display);
  font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  margin: 0;
}

.yo-display {
  font-family: var(--font-display);
  font-weight: var(--type-h0-weight);
  font-size: var(--type-h0-size);
  line-height: var(--type-h0-line);
}

p, .yo-body {
  font-family: var(--font-body);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  margin: 0;
}

.yo-body-strong {
  font-weight: var(--type-body-strong-weight);
}

.yo-button-label,
.yo-mono-caps {
  font-family: var(--font-mono);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
  letter-spacing: var(--type-button-tracking);
}

.yo-input-text {
  font-family: var(--font-mono);
  font-weight: var(--type-input-weight);
  font-size: var(--type-input-size);
  line-height: var(--type-input-line);
  letter-spacing: var(--type-input-tracking);
}

.yo-caption {
  font-family: var(--font-mono);
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-fg);
}

/* ============================================================
   Archetype reveal typography — utility classes mirroring tokens.
   Use only inside ArchetypeScreen / DiagnosticScreen.
   ============================================================ */

.yo-archetype-exclamation {
  font-family:    var(--type-archetype-exclamation-family);
  font-weight:    var(--type-archetype-exclamation-weight);
  font-size:      var(--type-archetype-exclamation-size);
  line-height:    var(--type-archetype-exclamation-line);
  letter-spacing: var(--type-archetype-exclamation-tracking);
  color:          var(--yo-ink);
  text-align:     center;
  margin:         0;
}

.yo-archetype-label {
  font-family:    var(--type-archetype-label-family);
  font-weight:    var(--type-archetype-label-weight);
  font-size:      var(--type-archetype-label-size);
  line-height:    var(--type-archetype-label-line);
  letter-spacing: var(--type-archetype-label-tracking);
  /* color is set inline from per-profile token */
  text-align:     center;
  margin:         0;
}

.yo-archetype-headline {
  font-family:    var(--type-archetype-headline-family);
  font-weight:    var(--type-archetype-headline-weight);
  font-size:      var(--type-archetype-headline-size);
  line-height:    var(--type-archetype-headline-line);
  letter-spacing: var(--type-archetype-headline-tracking);
  color:          var(--yo-ink);
  text-align:     center;
  margin:         0;
  max-width:      320px;
}

.yo-archetype-body {
  font-family:    var(--type-archetype-body-family);
  font-weight:    var(--type-archetype-body-weight);
  font-size:      var(--type-archetype-body-size);
  line-height:    var(--type-archetype-body-line);
  letter-spacing: var(--type-archetype-body-tracking);
  color:          var(--yo-ink-muted);
  text-align:     center;
  margin:         0;
  max-width:      var(--type-archetype-body-max-width);
}

.yo-metric {
  font-family: var(--font-mono);
  font-weight: var(--type-metric-weight);
  font-size: var(--type-metric-size);
  line-height: var(--type-metric-line);
  color: var(--color-cost);
}

code, kbd, samp, .yo-mono {
  font-family: var(--font-mono);
}