/*
 * Kindred brand tokens — the canonical palette, type, and shape system.
 * One brand, two voices: [data-kindred="parent"] and [data-kindred="kid"].
 * The spec behind these values is docs/brand.md.
 *
 * Fonts (Google Fonts):
 *   Fraunces — the brand face, both voices. Parent uses it plain;
 *              kid uses the SOFT/WONK axes ("SOFT" 100, "WONK" 1).
 *   Inter    — parent body/UI.  Nunito — kid body/UI.
 *   https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..700,0..100,0..1&family=Inter:wght@400;500;600&family=Nunito:wght@400;600;700;800&display=swap
 */

:root {
  /* ---- Core ramps (shared by both voices) ---------------------------- */
  /* Green — the anchor. Everything green derives from Kindred Forest.    */
  --k-forest-deep: #173f34;
  --k-forest:      #1f5946;   /* the brand anchor; parent primary        */
  --k-grass:       #33a06e;   /* same hue lifted; kid primary            */
  --k-grass-deep:  #1e7f55;
  --k-sage:        #d9e9dc;   /* parent tint */
  --k-spray:       #d7efe7;   /* kid tint (sky, jar glass)               */

  /* Coral — warmth, attention, honest warnings. Never shame-red.         */
  --k-blush:       #f8e4dc;
  --k-coral:       #ed8c73;   /* parent step  */
  --k-poppy:       #f0764a;   /* kid step     */
  --k-poppy-deep:  #d95f35;

  /* Gold — earnings, rewards, coins.                                     */
  --k-wheat:       #f7ecd4;
  --k-gold:        #e8b85d;   /* parent step  */
  --k-sun:         #ffc94d;   /* kid step     */
  --k-honey:       #8a6a1f;   /* text-safe gold */

  /* Violet — wishes, goals, the imagined future.                         */
  --k-lavender:    #ddd8ef;   /* parent tint  */
  --k-berry:       #a284e6;   /* kid step     */
  --k-berry-deep:  #7d5fd0;
  --k-plum:        #55497e;   /* text-safe violet */

  /* Kid-only: water/play neutral. No parent equivalent — on purpose.     */
  --k-creek:       #63c1e9;

  /* ---- Brand type ---------------------------------------------------- */
  --k-font-brand: "Fraunces", Georgia, "Times New Roman", serif;
  --k-kid-soft: "SOFT" 100, "WONK" 1;  /* font-variation-settings for the kid voice */
}

/* ---- Parent voice: calm, editorial, sage-tinted ---------------------- */
[data-kindred="parent"] {
  --k-ground:      #f8faf7;   /* paper — white tinted toward sage        */
  --k-surface:     #ffffff;
  --k-ink:         #1c2521;
  --k-muted:       #75807a;
  --k-line:        #e9ece7;
  --k-primary:      var(--k-forest);
  --k-primary-deep: var(--k-forest-deep);
  --k-primary-tint: var(--k-sage);
  --k-warm:         var(--k-coral);
  --k-reward:       var(--k-gold);
  --k-wonder:       var(--k-lavender);
  --k-font-display: "Fraunces", Georgia, serif;
  --k-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --k-soft: "SOFT" 0, "WONK" 0;
  --k-radius-s: 10px; --k-radius-m: 14px; --k-radius-l: 18px;
  --k-shadow: 0 14px 34px -18px rgba(23, 63, 52, 0.30);   /* cool, forest-cast */
  --k-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --k-time: 200ms;
}

/* ---- Kid voice: warm, rounded, sun-tinted ---------------------------- */
[data-kindred="kid"] {
  --k-ground:      #fff6e9;   /* cream — white tinted toward sun         */
  --k-surface:     #fffdf8;
  --k-ink:         #33302a;
  --k-muted:       #6f6a60;
  --k-line:        #f0e7d6;
  --k-primary:      var(--k-grass);
  --k-primary-deep: var(--k-grass-deep);
  --k-primary-tint: var(--k-spray);
  --k-warm:         var(--k-poppy);
  --k-reward:       var(--k-sun);
  --k-wonder:       var(--k-berry);
  --k-font-display: "Fraunces", Georgia, serif;
  --k-font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --k-soft: var(--k-kid-soft);
  --k-radius-s: 16px; --k-radius-m: 22px; --k-radius-l: 28px;
  --k-shadow: 0 14px 30px rgba(84, 66, 38, 0.14);         /* warm, honey-cast  */
  --k-ease: cubic-bezier(0.34, 1.56, 0.64, 1);            /* a little bounce   */
  --k-time: 350ms;
}

/* The wordmark is identical in both voices: Fraunces 640, forest period. */
.k-wordmark {
  font-family: var(--k-font-brand);
  font-weight: 640;
  letter-spacing: -0.01em;
  color: var(--k-ink, #1c2521);
}
.k-wordmark::after { content: "."; color: var(--k-forest); }
[data-kindred="kid"] .k-wordmark { font-variation-settings: var(--k-kid-soft); }
[data-kindred="kid"] .k-wordmark::after { color: var(--k-grass); }

/* Display type takes each voice's softness automatically. */
.k-display {
  font-family: var(--k-font-display);
  font-variation-settings: var(--k-soft);
  text-wrap: balance;
  line-height: 1.15;
}

/* Numbers are honest in both voices. */
.k-num { font-variant-numeric: tabular-nums; }