/* =========================================================
   Roblox AI BootCamp — Colors & Typography
   Adapted from a Duolingo-flavored visual system: playful,
   gamified, rounded, character-driven. Kids-first hierarchy.
   ========================================================= */

/* --- Fonts ------------------------------------------------
   Primary display family: jf-openhuninn (justfont 「粉園 子型」)
   — a plump, rounded, friendly Latin + Traditional-Chinese
   typeface that owns the brand's kid-handwriting vibe.
   Loaded locally from /fonts. Fredoka stays as the
   visual fallback in case the TTF fails to load.
   Body family: Nunito (DIN-Round substitute, Google Fonts).
   ---------------------------------------------------------- */
@font-face {
  font-family: "openhuninn";
  src: url("fonts/jf-openhuninn-2.1.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@500;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  /* ===== Color tokens ===== */

  /* Brand primaries */
  --color-bootcamp-green: #58cc02;       /* primary CTAs, logo, win states */
  --color-bootcamp-green-dark: #3f8f01;  /* 3D button bottom shadow */
  --color-bootcamp-green-light: #d7ffb8; /* tint, highlight backgrounds */

  /* Secondary / interactive */
  --color-sky-blue: #1cb0f6;             /* secondary actions, text links */
  --color-sky-blue-dark: #1899d6;        /* sky bottom shadow */
  --color-sky-blue-light: #ddf4ff;       /* tint */

  /* Roblox-flavored accents (used in illustrations + level pins) */
  --color-roblox-red: #ff4d4d;
  --color-roblox-red-dark: #cc3030;
  --color-sunshine-yellow: #ffc800;
  --color-sunshine-yellow-dark: #e0a400;
  --color-grape-soda: #a560ff;
  --color-grape-soda-dark: #8347d6;
  --color-bubblegum-pink: #ff64a8;

  /* Neutrals */
  --color-snow-white: #ffffff;
  --color-eggshell: #fafafa;             /* off-white surface */
  --color-cloud-gray: #e5e5e5;           /* borders, dividers */
  --color-cloud-gray-2: #f7f7f7;         /* card tints */
  --color-silver: #afafaf;               /* placeholder, disabled */
  --color-graphite: #777777;             /* body copy */
  --color-charcoal: #4b4b4b;             /* subheads */
  --color-almost-black: #3c3c3c;         /* primary text */

  /* Semantic (state) */
  --color-success: var(--color-bootcamp-green);
  --color-success-bg: var(--color-bootcamp-green-light);
  --color-warning: var(--color-sunshine-yellow);
  --color-danger:  var(--color-roblox-red);
  --color-info:    var(--color-sky-blue);

  /* Surface roles */
  --bg-page: var(--color-snow-white);
  --bg-card: var(--color-snow-white);
  --bg-muted: var(--color-cloud-gray-2);
  --fg-1: var(--color-almost-black);
  --fg-2: var(--color-graphite);
  --fg-3: var(--color-silver);
  --border-1: var(--color-cloud-gray);

  /* ===== Typography ===== */
  --font-display: "openhuninn", "Fredoka", ui-rounded, "Baloo 2", system-ui, sans-serif; /* brand display — jf-openhuninn */
  --font-ui:      "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* substitute for DIN Round */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-medium: 500;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Scale (DESIGN.md) */
  --text-caption: 13px;     --leading-caption: 1.4;       --tracking-caption: 0.69px;
  --text-body: 15px;        --leading-body: 1.4;          --tracking-body: 0.8px;
  --text-body-lg: 17px;     --leading-body-lg: 1.45;      --tracking-body-lg: 0.85px;
  --text-heading-sm: 19px;  --leading-heading-sm: 1.2;    --tracking-heading-sm: 1.01px;
  --text-heading: 32px;     --leading-heading: 1.2;       --tracking-heading: 1.7px;
  --text-heading-lg: 48px;  --leading-heading-lg: 1.2;    --tracking-heading-lg: -0.96px;
  --text-display: 64px;     --leading-display: 1.2;       --tracking-display: -1.28px;

  /* ===== Spacing ===== */
  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-96: 96px;

  /* ===== Radii ===== */
  --radius-sm: 8px;
  --radius:    12px;   /* default — buttons, inputs, cards */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ===== Elevation =====
     The system is intentionally flat. The ONLY shadow is the
     "3D button pad" — a solid bottom color, not a soft blur. */
  --shadow-press-green: 0 4px 0 var(--color-bootcamp-green-dark);
  --shadow-press-blue:  0 4px 0 var(--color-sky-blue-dark);
  --shadow-press-yellow: 0 4px 0 var(--color-sunshine-yellow-dark);
  --shadow-press-red:   0 4px 0 var(--color-roblox-red-dark);
  --shadow-press-gray:  0 4px 0 var(--color-cloud-gray);

  /* Card depression for skill bubbles (inner ledge) */
  --shadow-ledge: 0 2px 0 var(--color-cloud-gray);

  /* ===== Layout ===== */
  --page-max: 1140px;
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 16px;

  /* ===== Motion ===== */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* =========================================================
   Semantic element styles (use as classes or apply to tags)
   ========================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: 0.053em; /* signature DIN-Round-like tracking */
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-bootcamp-green);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-bootcamp-green);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-almost-black);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  text-transform: uppercase;
  color: var(--color-charcoal);
  margin: 0;
}
p, .p {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-graphite);
  margin: 0;
  text-wrap: pretty;
}
.caption {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-graphite);
}
a, .link {
  color: var(--color-sky-blue);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
a:hover, .link:hover { text-decoration: underline; }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-cloud-gray-2);
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0;
}