/* =========================================================
   PIANU — Design Tokens
   A piano app for kids 5-8. Warm, musical, joyful.

   Mirrors colors_and_type.css from the Pianu design system
   (claude.ai/design project 8cb88899). Only the @font-face
   `src` URLs differ: the originals point at fonts.gstatic.com
   and cdn.jsdelivr.net; here the files are served from
   assets/fonts/ so the site makes no third-party requests.
   Re-syncing the design system means reapplying that swap.
   ========================================================= */

/* =========================================================
   BRAND FONTS — self-hosted woff2 (all OFL-licensed)
   • Fredoka: variable font, weight axis 300–700
   • Nunito / Caveat: static per-weight files
   Free for commercial use.
   ========================================================= */

/* Fredoka — display / headings (variable font, covers 300–700) */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/fredoka-latin-wght-normal.woff2') format('woff2');
}

/* Nunito — body / UI */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/nunito-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/nunito-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/nunito-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/nunito-latin-900-normal.woff2') format('woff2');
}

/* Caveat — handwritten asides */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/caveat-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/caveat-latin-700-normal.woff2') format('woff2');
}

:root {
  /* ---------- COLOR: Brand core ----------
     Warm, earthy, slightly retro — terracotta + teal + sun yellow,
     offset by deep cosmic navy for "space" surfaces. */
  --terracotta-50:  #FDF1EA;
  --terracotta-100: #FADBC9;
  --terracotta-200: #F5B89C;
  --terracotta-300: #EE9270;
  --terracotta-400: #E8743B;   /* PRIMARY */
  --terracotta-500: #D55E26;
  --terracotta-600: #B14816;
  --terracotta-700: #8A370F;

  --teal-50:  #E8F4F6;
  --teal-100: #C4E2E7;
  --teal-200: #94CBD3;
  --teal-300: #5BA3B5;        /* SECONDARY */
  --teal-400: #3D8A9C;
  --teal-500: #2A6E7F;
  --teal-600: #1B5160;

  --sun-50:  #FEF6DA;
  --sun-100: #FDEBA8;
  --sun-200: #F8DC6E;
  --sun-300: #F2C94C;        /* ACCENT — golden notes, rewards */
  --sun-400: #E0B22F;
  --sun-500: #B8901D;

  /* "Night" navy palette — used for the lesson-player stage surface */
  --night-50:  #E8EAF5;
  --night-100: #B9C0DD;
  --night-300: #5C6AA1;
  --night-500: #2B3870;
  --night-700: #1A234D;
  --night-900: #0C1235;

  /* Note colors — color-coded keys (kid-friendly, one hue per note) */
  --note-c: #FF6B6B;   /* red */
  --note-d: #FF9F43;   /* orange */
  --note-e: #F2C94C;   /* yellow */
  --note-f: #6BCB77;   /* green */
  --note-g: #4DD0E1;   /* cyan */
  --note-a: #5B8DEF;   /* blue */
  --note-b: #B084EB;   /* purple */

  /* ---------- COLOR: Neutrals ---------- */
  --paper:    #FDFBF5;       /* default app bg, warm off-white */
  --paper-2:  #F6F1E4;       /* cards, panels */
  --paper-3:  #ECE5D0;       /* dividers, subtle wash */
  --ink-900:  #1F1A14;       /* primary text */
  --ink-700:  #4A3F32;       /* secondary text */
  --ink-500:  #7C6E5C;       /* tertiary, captions */
  --ink-300:  #B5A892;       /* muted, placeholders */
  --line:     rgba(31,26,20,0.10);
  --line-2:   rgba(31,26,20,0.18);

  /* ---------- COLOR: Semantic ---------- */
  --success:  #6BCB77;
  --success-bg: #E5F6E7;
  --warning:  #F2C94C;
  --warning-bg: #FEF6DA;
  --error:    #E8743B;
  --error-bg: #FDF1EA;

  /* Foreground tokens */
  --fg1: var(--ink-900);
  --fg2: var(--ink-700);
  --fg3: var(--ink-500);
  --fg-muted: var(--ink-300);
  --fg-on-dark: #FDFBF5;
  --fg-on-primary: #FFFFFF;

  /* Background tokens */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --bg-card: #FFFFFF;
  --bg-dark: var(--night-900);

  /* Brand semantic */
  --brand: var(--terracotta-400);
  --brand-hover: var(--terracotta-500);
  --brand-press: var(--terracotta-600);
  --brand-soft: var(--terracotta-50);

  /* ---------- TYPOGRAPHY: families ---------- */
  --font-display: 'Fredoka', 'SF Pro Rounded', system-ui, sans-serif; /* big, friendly, rounded */
  --font-body: 'Nunito', system-ui, sans-serif;                       /* legible UI text */
  --font-hand: 'Caveat', cursive;                                     /* speech-bubbles, asides */

  /* ---------- TYPOGRAPHY: scale ----------
     Kids app — bigger than grown-up apps. Min body 17px. */
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-md:   19px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-loose: 1.6;

  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 900;

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

  /* ---------- RADII (very rounded — kids' app) ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* ---------- SHADOWS ----------
     Two systems: soft "cushion" shadows for cards,
     and chunky "stacked" offset for game-y buttons. */
  --shadow-sm:  0 1px 2px rgba(31,26,20,0.06), 0 1px 3px rgba(31,26,20,0.05);
  --shadow-md:  0 4px 12px rgba(31,26,20,0.08), 0 2px 4px rgba(31,26,20,0.04);
  --shadow-lg:  0 12px 28px rgba(31,26,20,0.12), 0 4px 8px rgba(31,26,20,0.06);
  --shadow-xl:  0 24px 48px rgba(31,26,20,0.18);

  /* "Stacked" — chunky offset shadow with no blur, kid-app signature.
     Use as: box-shadow: var(--stack-brand); */
  --stack-brand:   0 4px 0 0 var(--terracotta-600);
  --stack-teal:    0 4px 0 0 var(--teal-500);
  --stack-sun:     0 4px 0 0 var(--sun-500);
  --stack-ink:     0 4px 0 0 var(--ink-900);
  --stack-soft:    0 4px 0 0 rgba(31,26,20,0.15);

  /* Inner glow used on pressed keys / pressed buttons */
  --inset-press: inset 0 3px 0 rgba(31,26,20,0.15);

  /* ---------- BORDERS ---------- */
  --border-thin: 1.5px solid var(--line);
  --border-bold: 3px solid var(--ink-900);   /* signature thick outline on hero buttons */

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot — kid feel */
  --ease-pop: cubic-bezier(0.5, 1.8, 0.5, 1);         /* big overshoot for rewards */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
p, .p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg2);
  text-wrap: pretty;
}
.caption {
  font-size: var(--text-sm);
  color: var(--fg3);
  font-weight: var(--weight-medium);
}
.label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg2);
}
.hand {
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  color: var(--fg2);
}
code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
}