/* =====================================================================
   DUETTO — Design System Tokens
   A music-practice companion for two sisters. Warm, playful, encouraging.
   Brand world inherited from "Evanor" (Evelyn = pink cat, Eleanor = purple).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Grand+Hotel&display=swap');

:root {
  /* ---------- FOUNDATION ---------- */
  --color-cream:        #FBF3E4; /* app background / resting canvas */
  --color-cream-deep:   #F3E7D1; /* recessed cream, wells */
  --color-surface:      #FFFFFF; /* cards, sheets, raised surfaces */
  --color-surface-tint: #FDF1F4; /* subtle pink-tinted surface / gradient start */
  --color-ink:          #4A3344; /* headings, primary text (aubergine) — matches mascot outline */
  --color-ink-muted:    #8B7585; /* body / secondary text (mauve-grey) */
  --color-hairline:     #EADFD0; /* borders, dividers */
  --color-hairline-warm:#E7D5C0; /* warm offset-shadow tone on cream */

  /* ---------- BRAND DUO (the two cats) ---------- */
  --color-evelyn:        #F4A9BC; /* Evelyn / pink cat — soft brand pink */
  --color-evelyn-deep:   #B23A6A; /* pink shadow / pressed / deep accents */
  --color-evelyn-soft:   #FBE0E7; /* pink wash / tinted fills */
  --color-eleanor:       #B9A8DD; /* Eleanor / purple cat — soft brand lavender */
  --color-eleanor-deep:  #7B6BA8; /* purple shadow / pressed / deep accents */
  --color-eleanor-soft:  #ECE6F7; /* lavender wash / tinted fills */
  --color-primary:       #EC5E92; /* vivid CTA pink ("Play"-style buttons) */
  --color-primary-shadow:#C2487A; /* chunky offset shadow under primary CTA */

  /* ---------- GAMIFICATION / REWARD ACCENTS ---------- */
  /* reserved for streaks, XP, milestones, celebrations — never for chrome */
  --color-xp-gold:    #F5B82E; /* XP, stars, achievement badges */
  --color-xp-deep:    #D99211; /* gold offset / pressed */
  --color-streak:     #FF8A5C; /* streak flame / "on fire" */
  --color-streak-deep:#E96A3A;
  --color-success:    #6FCF97; /* completed practice / goals met */
  --color-success-deep:#46A56F;
  --color-info:       #8FC1E8; /* gentle info / tips */
  --color-info-deep:  #5C97C7;

  /* ---------- ON-ACCENT TEXT (WCAG-checked pairings) ---------- */
  --on-primary:  #FFFFFF;        /* large/bold only — buttons ≥18px bold */
  --on-evelyn:   var(--color-ink);
  --on-eleanor:  var(--color-ink);
  --on-gold:     var(--color-ink);
  --on-streak:   var(--color-ink);
  --on-success:  #103A22;
  --on-info:     #14304A;

  /* ---------- TYPE ---------- */
  --font-script:  'Grand Hotel', cursive;          /* wordmark + rare flourish */
  --font-display: 'Fredoka', system-ui, sans-serif;/* headings — rounded, chunky */
  --font-ui:      'Nunito', system-ui, sans-serif; /* body / UI / journal */

  --text-display: 56px;  /* @kind font */
  --text-h1: 40px;       /* @kind font */
  --text-h2: 30px;       /* @kind font */
  --text-h3: 24px;       /* @kind font */
  --text-body-lg: 20px;  /* @kind font */
  --text-body: 17px;     /* @kind font */
  --text-caption: 14px;  /* @kind font */
  --text-label: 13px;    /* @kind font */
  /* line-heights */
  --lh-display: 1.04; /* @kind font */  --lh-h1: 1.10; /* @kind font */  --lh-h2: 1.15; /* @kind font */  --lh-h3: 1.22; /* @kind font */
  --lh-body-lg: 1.5; /* @kind font */   --lh-body: 1.55; /* @kind font */  --lh-caption: 1.4; /* @kind font */  --lh-label: 1.1; /* @kind font */
  /* weights */
  --w-display: 700; /* @kind font */  --w-h1: 600; /* @kind font */  --w-h2: 600; /* @kind font */  --w-h3: 600; /* @kind font */
  --w-body-lg: 500; /* @kind font */  --w-body: 400; /* @kind font */  --w-caption: 600; /* @kind font */  --w-label: 700; /* @kind font */

  /* ---------- SPACING (4-based) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* ---------- RADIUS ---------- */
  --radius-sm: 12px;   /* small chips, inner elements */
  --radius-md: 16px;   /* inputs, controls */
  --radius-lg: 20px;   /* cards */
  --radius-xl: 24px;   /* large cards, sheets */
  --radius-pill: 999px;/* buttons, badges */

  /* ---------- ELEVATION ---------- */
  /* Signature chunky OFFSET shadow — minimal blur, deeper element tone. */
  --shadow-offset-sm: 3px 3px 0;
  --shadow-offset:    4px 4px 0;
  --shadow-offset-lg: 6px 6px 0;
  /* Softer AMBIENT shadow for calm depth on surfaces. */
  --shadow-ambient:    0 6px 18px rgba(74, 51, 68, 0.10);
  --shadow-ambient-lg: 0 16px 38px rgba(74, 51, 68, 0.14);

  /* ---------- MOTION ---------- */
  --ease-calm:  cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */ /* everyday UI — quick, settled */
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */ /* rewards — bouncy overshoot */
  --dur-fast: 140ms; /* @kind other */
  --dur: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ===================== BASE ===================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--color-ink); }
p { margin: 0; }

/* ===================== BRAND UTILITIES ===================== */

/* Soft surface card — calm, hairline + ambient shadow (everyday chrome) */
.duo-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}

/* Sticker card — chunky aubergine outline + offset shadow (raised, playful) */
.duo-sticker {
  background: var(--color-surface);
  border: 2.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm);
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  border: 2.5px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 14px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur-fast) var(--ease-calm),
              background var(--dur-fast) var(--ease-calm);
  user-select: none;
}
.btn-primary   { background: var(--color-primary);  color: var(--on-primary);
                 box-shadow: var(--shadow-offset) var(--color-primary-shadow); }
.btn-secondary { background: var(--color-eleanor);  color: var(--color-ink);
                 box-shadow: var(--shadow-offset) var(--color-eleanor-deep); }
.btn-tertiary  { background: var(--color-surface);  color: var(--color-ink);
                 box-shadow: var(--shadow-offset) var(--color-hairline-warm); }
.btn-ghost     { background: transparent; border-color: transparent; color: var(--color-ink);
                 box-shadow: none; }

/* Hover — lift toward the light, shadow grows */
.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover {
  transform: translate(-2px, -2px);
}
.btn-primary:hover   { box-shadow: var(--shadow-offset-lg) var(--color-primary-shadow); }
.btn-secondary:hover { box-shadow: var(--shadow-offset-lg) var(--color-eleanor-deep); }
.btn-tertiary:hover  { box-shadow: var(--shadow-offset-lg) var(--color-hairline-warm); }
.btn-ghost:hover     { background: var(--color-surface-tint); }

/* Pressed — push into the page, shadow collapses */
.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--color-primary-shadow);
}
.btn-secondary:active { box-shadow: 0 0 0 var(--color-eleanor-deep); }
.btn-tertiary:active  { box-shadow: 0 0 0 var(--color-hairline-warm); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-hairline);
  color: var(--color-ink-muted);
  border-color: var(--color-ink-muted);
  box-shadow: var(--shadow-offset) var(--color-hairline-warm);
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

/* ---------- CHIPS / TAGS ---------- */
.chip {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-caption);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid transparent;
}
.chip-grade    { background: var(--color-eleanor-soft); color: var(--color-eleanor-deep); border-color: #D7CCEC; }
.chip-piano    { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-hairline); }
.chip-violin   { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-hairline); }
.chip-new      { background: var(--color-primary); color: #fff; }

/* Focus ring — consistent, visible (accessibility) */
:focus-visible {
  outline: 3px solid var(--color-eleanor-deep);
  outline-offset: 2px;
}