/* ============================================================
   Jane Design System — Foundations
   Navy + Coral palette, soft cream canvas, DM Sans throughout.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap");

:root {
  /* ── Brand & surface ─────────────────────────────────────── */
  --bg:                  #f5ede8;          /* cream — main app canvas */
  --surface:             #ffffff;          /* card surface */
  --surface-inactive:    rgba(28,43,69,0.06);

  /* ── Foreground (navy ramp) ──────────────────────────────── */
  --fg-1:                #1c2b45;          /* primary text, titles, navy CTA */
  --fg-2:                #5a6b82;          /* body, secondary */
  --fg-3:                #9baab8;          /* tertiary, hints, inactive */
  --fg-on-coral:         #ffffff;          /* text on coral */
  --fg-on-navy:          #ffffff;

  /* ── Accent (coral) ──────────────────────────────────────── */
  --coral:               #d95228;          /* primary action, highlight */
  --coral-deep:          #df5115;          /* full-bleed coral cards */
  --coral-tint:          #fff0ea;          /* soft coral wash, badges */
  --coral-tint-2:        #ffeae5;          /* warm wash 2 */
  --coral-tint-3:        #ffeae5;

  /* ── Supporting (used in XP, badges, success / info) ─────── */
  --gold:                #e8a020;          /* XP fill, level accents */
  --gold-bright:         #ffb020;          /* XP value text */
  --gold-tint:           #fff7e6;          /* XP soft surface */
  --gold-tint-2:         rgba(255,176,32,0.18);
  --green:               #2a7d6e;          /* all-time XP, success */
  --green-tint:          #e8f5f3;
  --blue:                #3b6cbf;          /* info */
  --blue-tint:           #e8f0ff;
  --red:                 #e55555;          /* destructive */

  /* ── Borders & lines ─────────────────────────────────────── */
  --border-card:         rgba(28,43,69,0.07);
  --border-input:        rgba(28,43,69,0.20);
  --border-back:         rgba(28,43,69,0.10);
  --border-selected:     #d95228;
  --line-faint:          rgba(28,43,69,0.05);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card:         0 2px 14px rgba(28,43,69,0.07);
  --shadow-card-hi:      0 8px 32px rgba(28,43,69,0.22);
  --shadow-button-coral: 0 4px 12px rgba(217,82,40,0.25);
  --shadow-button-navy:  0 4px 12px rgba(28,43,69,0.07);
  --shadow-bubble:       0 2px 10px rgba(28,43,69,0.07);
  --shadow-phone:        0 0 0 1px rgba(28,43,69,0.06), 0 40px 100px rgba(28,43,69,0.22);

  /* ── Radii ───────────────────────────────────────────────── */
  --r-xs:    8px;
  --r-sm:    12px;
  --r-md:    16px;     /* card radius */
  --r-lg:    20px;     /* large cards */
  --r-xl:    24px;     /* XP / modal cards */
  --r-pill:  999px;    /* buttons */
  --r-phone: 52px;

  /* ── Spacing scale ───────────────────────────────────────── */
  --s-xs:    8px;
  --s-sm:    12px;
  --s-md:    16px;
  --s-lg:    24px;
  --s-xl:    32px;
  --s-xxl:   48px;
  --screen-h: 24px;

  /* ── Sizing ──────────────────────────────────────────────── */
  --button-h: 56px;
  --back-btn: 36px;
  --icon-sm:  40px;
  --icon-md:  64px;
  --icon-lg:  72px;
  --icon-xl:  80px;

  /* ── Type ─────────────────────────────────────────────────── */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Heading scale (DM Sans 800 ExtraBold, tight tracking) */
  --h1-size:    32px; --h1-lh: 36.8px; --h1-ls: -0.5px;
  --h2-size:    30px; --h2-lh: 36px;   --h2-ls: -0.4px;
  --h3-size:    28px; --h3-lh: 33.6px; --h3-ls: -0.4px;
  --h4-size:    24px; --h4-lh: 28.8px; --h4-ls: -0.3px;
  --h5-size:    20px; --h5-lh: 24px;   --h5-ls: -0.2px;

  /* Body & utility */
  --body-size:    17px; --body-lh: 27.625px;
  --body-sm:      15px; --body-sm-lh: 22.5px;
  --caption-size: 13px; --caption-lh: 19.5px;

  /* Buttons & labels */
  --button-size:  17px; --button-lh: 25.5px;
  --opt-size:     16px; --opt-lh:    22px;
  --card-lbl:     14px; --card-lbl-lh: 19.25px;

  /* Eyebrow / overline */
  --eyebrow-size: 12px; --eyebrow-lh: 16px; --eyebrow-ls: 1.2px;
}

/* ============================================================
   Semantic primitives — drop these classes onto elements
   ============================================================ */

html, body {
  font-family: var(--font);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1.jane { font: 800 var(--h1-size)/var(--h1-lh) var(--font); letter-spacing: var(--h1-ls); color: var(--fg-1); margin: 0; }
.h2, h2.jane { font: 800 var(--h2-size)/var(--h2-lh) var(--font); letter-spacing: var(--h2-ls); color: var(--fg-1); margin: 0; }
.h3, h3.jane { font: 800 var(--h3-size)/var(--h3-lh) var(--font); letter-spacing: var(--h3-ls); color: var(--fg-1); margin: 0; }
.h4, h4.jane { font: 800 var(--h4-size)/var(--h4-lh) var(--font); letter-spacing: var(--h4-ls); color: var(--fg-1); margin: 0; }
.h5, h5.jane { font: 800 var(--h5-size)/var(--h5-lh) var(--font); letter-spacing: var(--h5-ls); color: var(--fg-1); margin: 0; }

.body     { font: 400 var(--body-size)/var(--body-lh) var(--font); color: var(--fg-2); }
.body-sm  { font: 400 var(--body-sm)/var(--body-sm-lh) var(--font); color: var(--fg-2); }
.caption  { font: 400 var(--caption-size)/var(--caption-lh) var(--font); color: var(--fg-3); }
.eyebrow  { font: 700 var(--eyebrow-size)/var(--eyebrow-lh) var(--font); letter-spacing: var(--eyebrow-ls); color: var(--fg-3); text-transform: uppercase; }

.btn-label   { font: 700 var(--button-size)/var(--button-lh) var(--font); }
.opt-label   { font: 400 var(--opt-size)/var(--opt-lh) var(--font); color: var(--fg-1); }
.opt-label--selected { font-weight: 700; }
.card-label  { font: 400 var(--card-lbl)/var(--card-lbl-lh) var(--font); color: var(--fg-1); }

.highlight { color: var(--coral); }

/* Brand wordmark — handlettered look uses italic-leaning DM Sans 800 */
.wordmark { font: 800 italic 1em/1 var(--font); color: var(--coral); letter-spacing: -0.02em; }