/* ──────────────────────────────────────────────────────────────
   SpanishBuddy — Colors & Type
   Source of truth for all brand visuals.
   ────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,400;9..144,0,500;9..144,0,600;9..144,0,700;9..144,0,800;9..144,0,900;9..144,1,400;9..144,1,600;9..144,1,700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ─── Brand Colors ─────────────────────────────────────────── */
  /* Surfaces */
  --sb-cream:        #F4EFE3;   /* primary surface — paper, app bg */
  --sb-cream-2:      #FBF7EC;   /* lighter cream — cards, inputs */
  --sb-cream-edge:   #E8DFCD;   /* borders, separators on cream */
  --sb-white:        #FFFFFF;

  /* Text / ink */
  --sb-ink:          #1A1410;   /* near-black brown — primary text */
  --sb-ink-soft:     #4A3F35;   /* secondary text, muted body */
  --sb-ink-faint:    #8A7C6F;   /* metadata, captions */

  /* Brand accents */
  --sb-green:        #0E7C66;   /* primary brand — the "Buddy" green */
  --sb-green-dark:   #0A5A4A;   /* hover / pressed states */
  --sb-green-soft:   #C8E0D7;   /* tonal background, badges */

  --sb-peach:        #D97757;   /* warm secondary — practice / streaks */
  --sb-peach-dark:   #C16344;
  --sb-peach-soft:   #F4D9C9;

  --sb-brown:        #5C3010;   /* tertiary — taglines, eyebrows */

  /* Semantic */
  --sb-success:      #0E7C66;
  --sb-warning:      #D97757;
  --sb-danger:       #C04A3A;
  --sb-streak-fire:  #E8854A;

  /* ─── Typography ───────────────────────────────────────────── */
  --sb-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sb-font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sb-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --sb-fs-display-xl: 64px;
  --sb-fs-display-l:  48px;
  --sb-fs-display-m:  36px;
  --sb-fs-h1:         32px;
  --sb-fs-h2:         24px;
  --sb-fs-h3:         20px;
  --sb-fs-body:       16px;
  --sb-fs-small:      14px;
  --sb-fs-caption:    12px;
  --sb-fs-eyebrow:    11px;

  /* Line heights */
  --sb-lh-display:    1.05;
  --sb-lh-heading:    1.2;
  --sb-lh-body:       1.55;
  --sb-lh-tight:      1.25;

  /* Letter spacing */
  --sb-ls-display:    -0.02em;
  --sb-ls-heading:    -0.01em;
  --sb-ls-body:        0em;
  --sb-ls-eyebrow:     0.18em;

  /* ─── Spacing (4px base) ───────────────────────────────────── */
  --sb-sp-1:   4px;
  --sb-sp-2:   8px;
  --sb-sp-3:   12px;
  --sb-sp-4:   16px;
  --sb-sp-5:   20px;
  --sb-sp-6:   24px;
  --sb-sp-8:   32px;
  --sb-sp-10:  40px;
  --sb-sp-12:  48px;
  --sb-sp-16:  64px;
  --sb-sp-20:  80px;

  /* ─── Radii ────────────────────────────────────────────────── */
  --sb-radius-xs:  6px;
  --sb-radius-sm:  10px;
  --sb-radius-md:  14px;   /* default for buttons, fields */
  --sb-radius-lg:  18px;   /* cards */
  --sb-radius-xl:  24px;   /* hero panels */
  --sb-radius-pill: 999px;

  /* ─── Shadows (warm-tinted) ────────────────────────────────── */
  --sb-shadow-sm: 0 1px 2px rgba(60,40,20,0.06), 0 2px 6px rgba(60,40,20,0.04);
  --sb-shadow-md: 0 4px 12px rgba(60,40,20,0.08), 0 2px 4px rgba(60,40,20,0.05);
  --sb-shadow-lg: 0 8px 28px rgba(60,40,20,0.10), 0 4px 10px rgba(60,40,20,0.06);
  --sb-shadow-xl: 0 18px 48px rgba(60,40,20,0.16), 0 6px 16px rgba(60,40,20,0.08);
  --sb-shadow-press: inset 0 2px 4px rgba(60,40,20,0.10);

  /* ─── Motion ───────────────────────────────────────────────── */
  --sb-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --sb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sb-dur-fast:    140ms;
  --sb-dur-base:    220ms;
  --sb-dur-slow:    360ms;
}

/* ─── Semantic type classes ──────────────────────────────────── */
.sb-display-xl,
.sb-display-l,
.sb-display-m {
  font-family: var(--sb-font-display);
  font-weight: 700;
  line-height: var(--sb-lh-display);
  letter-spacing: var(--sb-ls-display);
  color: var(--sb-ink);
  text-wrap: balance;
}
.sb-display-xl { font-size: var(--sb-fs-display-xl); }
.sb-display-l  { font-size: var(--sb-fs-display-l); }
.sb-display-m  { font-size: var(--sb-fs-display-m); }

.sb-italic-accent {
  font-style: italic;
  color: var(--sb-green);
}

.sb-h1, .sb-h2, .sb-h3 {
  font-family: var(--sb-font-display);
  font-weight: 700;
  line-height: var(--sb-lh-heading);
  letter-spacing: var(--sb-ls-heading);
  color: var(--sb-ink);
}
.sb-h1 { font-size: var(--sb-fs-h1); }
.sb-h2 { font-size: var(--sb-fs-h2); }
.sb-h3 { font-size: var(--sb-fs-h3); }

.sb-body {
  font-family: var(--sb-font-body);
  font-weight: 500;
  font-size: var(--sb-fs-body);
  line-height: var(--sb-lh-body);
  color: var(--sb-ink);
}
.sb-body-soft {
  composes: sb-body;
  color: var(--sb-ink-soft);
}
.sb-small {
  font-family: var(--sb-font-body);
  font-weight: 500;
  font-size: var(--sb-fs-small);
  line-height: var(--sb-lh-body);
  color: var(--sb-ink-soft);
}
.sb-caption {
  font-family: var(--sb-font-body);
  font-weight: 600;
  font-size: var(--sb-fs-caption);
  color: var(--sb-ink-faint);
}

.sb-eyebrow {
  font-family: var(--sb-font-body);
  font-weight: 700;
  font-size: var(--sb-fs-eyebrow);
  letter-spacing: var(--sb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sb-brown);
}

.sb-wordmark {
  font-family: var(--sb-font-body);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sb-ink);
}
.sb-wordmark > .accent { color: var(--sb-green); }

.sb-tagline {
  font-family: var(--sb-font-body);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sb-brown);
}

/* ─── Spanish-specific accent ───────────────────────────────── */
/* When mixing Spanish into English copy — italic in display, regular weight in body */
.sb-es {
  font-style: italic;
  color: var(--sb-green);
}
.sb-body .sb-es { font-style: italic; color: inherit; }