/* ============================================================
   Echo — Colors & Type  (brand layer)
   Source of truth: docs/design/echo-design-system/.../colors_and_type.css
   (Claude Design handoff bundle).

   Echo ships NO webfonts from the network at runtime — it's an
   offline-first PWA. The kid-facing display face (Nunito) is bundled
   locally as a self-hosted woff2 in player/fonts/ so cold/offline
   launches still get the brand display type. Body/tool surfaces use
   the native system stack.

   Load this AFTER spectrum-foundations.css:
     <link rel="stylesheet" href="./spectrum-foundations.css">
     <link rel="stylesheet" href="./colors_and_type.css">

   Spectrum → Echo mapping (see Echo Design System README):
   • Accent group   Spectrum Blue → SEAFOAM. --echo-accent #0f8b8d ≈ seafoam-500.
   • Positive       Spectrum green  → --echo-good
   • Notice         Spectrum orange → --echo-warn
   • Negative       Spectrum red    → --echo-bad / --echo-record
   • Radius 8px     == Spectrum --sp-radius-medium
   • Spacing        snaps to the Spectrum 8px grid (--sp-size-*)
   • Neutrals       Echo uses a custom COOL-slate gray ramp (bluer than
                    Spectrum's neutral gray) for a softer kid-friendly feel.
   ============================================================ */

/* Self-hosted Nunito variable font, weights 600–800, latin only.
   Bundled offline so the PWA's first paint matches design even on a
   cold / disconnected install. The native system fallback also looks
   warm enough that font-display: swap is safe (no FOIT). */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("./fonts/nunito-vf.woff2") format("woff2-variations"),
       url("./fonts/nunito-vf.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Brand / surfaces ---- */
  --echo-bg-warm:    #fdf9f1; /* PWA background/theme color, brand splash */
  --echo-bg:         #f7f8fb; /* default app surface (parent review, import) */
  --echo-bg-player:  #f8fafc; /* kid player surface */
  --echo-panel:      #ffffff; /* cards, forms, feedback panels */
  --echo-panel-soft: #eef6f3; /* soft teal-tinted panel */

  /* ---- Ink ---- */
  --echo-ink:    #182033;
  --echo-muted:  #627086;
  --echo-line:   #d8dee9;

  /* ---- Brand accent (teal) ---- */
  --echo-accent:        #0f8b8d;
  --echo-accent-strong: #096b6d;
  --echo-accent-focus:  rgba(15, 139, 141, 0.18);

  /* ---- Record (the one warm-red, used ONLY while recording) ---- */
  --echo-record: #e5484d;

  /* ---- 4-state verdict + semantic ---- */
  --echo-good: #227a55;
  --echo-warn: #a86200;
  --echo-bad:  #9b2c2c;

  /* ---- Semantic tints (pill / badge / banner fills) ---- */
  --echo-good-tint: #e8f7ef;
  --echo-warn-tint: #fff7e8;
  --echo-bad-tint:  #ffe7e7;
  --echo-live-tint:     #e4f7ed;
  --echo-accepted-tint: #fff1db;

  /* ---- Neutral control fills ---- */
  --echo-control:      #eef3f6;
  --echo-control-blue: #e9eef5;
  --echo-chip:         #e8eef5;

  /* ---- Mascot ---- */
  --echo-bunny: #fde8c5;

  /* ---- Elevation ---- */
  --echo-shadow:        0 12px 30px rgba(24, 32, 51, 0.08);
  --echo-shadow-lg:     0 16px 42px rgba(23, 32, 51, 0.12);
  --echo-shadow-accent: 0 18px 36px rgba(15, 139, 141, 0.26);
  --echo-shadow-record: 0 18px 36px rgba(229, 72, 77, 0.22);

  /* ---- Radii ---- */
  --echo-r-sm:   8px;
  --echo-r-tile: 12px;
  --echo-r-pill: 999px;

  /* ---- Type: native system stack everywhere; Nunito for the kid surface ---- */
  --echo-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --echo-font-display: "Nunito", var(--echo-font);
  --echo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Weights Echo actually uses */
  --echo-w-reg:    400;
  --echo-w-medium: 650;
  --echo-w-semi:   750;
  --echo-w-bold:   800;

  /* Step scale (px) */
  --echo-text-question: clamp(30px, 7vw, 48px);
  --echo-text-h1:       clamp(28px, 5vw, 44px);
  --echo-text-display:  clamp(38px, 10vw, 64px);
  --echo-text-feedback: 21px;
  --echo-text-body:     17px;
  --echo-text-sub:      15px;
  --echo-text-meta:     13px;
  --echo-text-micro:    12px;
}

/* ============================================================
   Echo icon helper class
   Usage: <svg class="ec"><use href="./icons.svg#ec-play"/></svg>
   24px grid, 1.8px stroke, round caps/joins, inherits currentColor.
   ============================================================ */
.ec {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============================================================
   Semantic element styles — apply these classes anywhere.
   ============================================================ */
.echo-h1 {
  font-family: var(--echo-font);
  font-size: var(--echo-text-h1);
  line-height: 1.08;
  font-weight: var(--echo-w-bold);
  color: var(--echo-ink);
  margin: 0;
}

.echo-display {
  font-family: var(--echo-font-display);
  font-size: var(--echo-text-display);
  line-height: 1;
  font-weight: var(--echo-w-bold);
  color: var(--echo-ink);
  margin: 0;
}

.echo-question {
  font-family: var(--echo-font-display);
  font-size: var(--echo-text-question);
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: 0;
  color: var(--echo-ink);
  text-align: center;
  text-wrap: balance;
}

.echo-feedback-title {
  font-family: var(--echo-font);
  font-size: var(--echo-text-feedback);
  font-weight: var(--echo-w-semi);
  color: var(--echo-ink);
}

.echo-p {
  font-family: var(--echo-font);
  font-size: var(--echo-text-body);
  line-height: 1.42;
  font-weight: var(--echo-w-reg);
  color: var(--echo-ink);
  margin: 0;
}

.echo-sub {
  font-family: var(--echo-font);
  font-size: var(--echo-text-sub);
  line-height: 1.5;
  color: var(--echo-muted);
  margin: 0;
}

.echo-meta {
  font-family: var(--echo-font);
  font-size: var(--echo-text-meta);
  color: var(--echo-muted);
}

.echo-label {
  font-family: var(--echo-font);
  font-size: var(--echo-text-micro);
  font-weight: var(--echo-w-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--echo-muted);
}

.echo-mono {
  font-family: var(--echo-mono);
  font-variant-numeric: tabular-nums;
  color: var(--echo-muted);
}