/* =========================================================================
   Ziji — Design Foundation
   AI parenting companion. Voice: hopeful like sunshine.
   Visual world: soft 3D claymorphic characters on warm cream surfaces.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  /* =========================================================================
     COLOR — Two hues only. Sun (orange/yellow) + Peach (coral). Cream + ink.
     The supporting characters (Sky, Luna) keep their painted color in the
     illustrations, but the UI palette is restricted to this set.
     ========================================================================= */

  /* SUN — primary brand. Orange-leaning yellow. */
  --ziji-sun-50:  #FFF6DC;
  --ziji-sun-100: #FFE8A6;
  --ziji-sun-200: #FFD667;
  --ziji-sun-300: #FFBD2E;
  --ziji-sun-400: #F59E0B;   /* hand-lettered orange — the wordmark color */
  --ziji-sun-500: #E8830C;
  --ziji-sun-600: #C26509;
  --ziji-sun-700: #8C4806;

  /* PEACH — empathy, warmth, soft accents */
  --ziji-peach-50:  #FFF1EC;
  --ziji-peach-100: #FFD9CB;
  --ziji-peach-200: #FFB9A1;
  --ziji-peach-300: #FF9477;
  --ziji-peach-400: #F47A5C;
  --ziji-peach-500: #E25F42;
  --ziji-peach-600: #B8442A;

  /* Cream + ink neutrals — never pure white/black */
  --ziji-cream-50:  #FFFBF1;
  --ziji-cream-100: #FBF3DF;
  --ziji-cream-200: #F2E7C9;
  --ziji-cream-300: #E5D6A8;

  --ziji-ink-50:   #9C8B6E;
  --ziji-ink-100:  #7A6951;
  --ziji-ink-300:  #4A3D2C;
  --ziji-ink-500:  #2A2114;

  /* Cheek-blush — used inside character illustrations only */
  --ziji-blush:    #F69A8C;

  /* Semantic tokens */
  --color-bg:            var(--ziji-cream-50);
  --color-bg-elevated:   #FFFFFF;
  --color-bg-cream:      var(--ziji-cream-100);
  --color-bg-peach:      var(--ziji-peach-50);
  --color-bg-sun:        var(--ziji-sun-50);

  --color-fg:            var(--ziji-ink-500);
  --color-fg-soft:       var(--ziji-ink-300);
  --color-fg-muted:      var(--ziji-ink-50);
  --color-fg-inverse:    #FFFFFF;

  --color-primary:       var(--ziji-sun-400);   /* hand-lettered orange */
  --color-primary-hover: var(--ziji-sun-500);
  --color-primary-soft:  var(--ziji-sun-100);
  --color-on-primary:    #FFFFFF;

  --color-accent:        var(--ziji-peach-400);
  --color-accent-hover:  var(--ziji-peach-500);
  --color-accent-soft:   var(--ziji-peach-100);

  --color-border:        rgba(74, 61, 44, 0.10);
  --color-border-strong: rgba(74, 61, 44, 0.20);
  --color-focus-ring:    rgba(245, 158, 11, 0.45);

  --color-success: #6FA86F;
  --color-warning: var(--ziji-peach-500);
  --color-danger:  var(--ziji-peach-600);

  /* =========================================================================
     TYPOGRAPHY
     Caveat (display, hand-lettered orange) + Nunito (body, soft sans).
     ========================================================================= */
  --font-display: 'Caveat', 'Bradley Hand', 'Marker Felt', cursive;
  --font-body:    'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand:    'Caveat', 'Bradley Hand', cursive;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  --leading-tight:   1.0;
  --leading-snug:    1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* =========================================================================
     SHAPE — squishy.
     ========================================================================= */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-3xl:  56px;
  --radius-pill: 9999px;
  --radius-blob: 62% 38% 55% 45% / 48% 52% 48% 52%;
  --radius-squircle: 38%;

  /* SPACING — 4pt grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* SHADOW — warm-tinted, diffuse. */
  --shadow-sm:    0 2px 6px rgba(74, 61, 44, 0.06);
  --shadow-md:    0 10px 28px rgba(74, 61, 44, 0.09);
  --shadow-lg:    0 22px 50px rgba(74, 61, 44, 0.12);
  --shadow-xl:    0 32px 72px rgba(74, 61, 44, 0.16);
  --shadow-glow:  0 0 56px rgba(245, 158, 11, 0.32);
  --shadow-character: 0 28px 30px -16px rgba(74, 61, 44, 0.22);
  --shadow-inner: inset 0 2px 4px rgba(74, 61, 44, 0.06);

  /* MOTION */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-quick:   160ms;
  --dur-normal:  280ms;
  --dur-slow:    520ms;
}

html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The display font IS the orange handwritten brand voice. */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  color: var(--color-primary);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  line-height: var(--leading-snug);
  color: var(--color-primary);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-primary);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-fg);
}
p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-soft);
  text-wrap: pretty;
}
.lede {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-soft);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  color: var(--color-fg-muted);
  text-transform: uppercase;
}
.hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-primary);
}

/* The "highlight" — soft sun-yellow underline behind a word */
.highlight {
  background-image: linear-gradient(
    transparent 60%,
    var(--ziji-sun-200) 60%,
    var(--ziji-sun-300) 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  padding: 0 0.15em;
}