/* =========================================================================
   Daily Parent Colors & Type
   Warm Japandi Storybook palette · soft rounded humanist sans + warm serif
   ========================================================================= */

/* ---------- Fonts (Google Fonts substitutes, flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  /* ---------------- Primary palette ---------------- */
  --dp-warm-cream:     #F7F1E7;
  --dp-soft-oat:       #EFE3D1;
  --dp-elevated-card:  #FAF5EC;
  --dp-natural-beige:  #D8BE9A;
  --dp-light-wood:     #C9A77B;
  --dp-honey-yellow:   #DCA73A;
  --dp-terracotta:     #C66B3D;
  --dp-muted-denim:    #5F7F9C;
  --dp-soft-sage:      #9EAD8D;
  --dp-cocoa-brown:    #4A2C1E;
  --dp-soft-charcoal:  #3A332F;
  --dp-blush-coral:    #D98264;

  /* ---------------- Product family colors ---------------- */
  --grow:              #6B7D65;
  --grow-deep:         #55654F;
  --grow-soft:         rgba(107, 125, 101, 0.10);
  --grow-tint:         #DBE2D3;
  --calm:              #5C6F82;
  --calm-deep:         #3f4f5f;
  --calm-soft:         rgba(92, 111, 130, 0.10);
  --calm-tint:         #DCE2EA;
  --bond:              #B87C5A;
  --bond-deep:         #8f5a3e;
  --bond-soft:         rgba(184, 124, 90, 0.10);
  --bond-tint:         #F2E2D2;

  /* Legacy aliases kept for existing implementation names. */
  --practice:          var(--grow);
  --practice-deep:     var(--grow-deep);
  --practice-soft:     var(--grow-soft);
  --reflect:           var(--calm);
  --reflect-deep:      var(--calm-deep);
  --reflect-soft:      var(--calm-soft);

  /* ---------------- Semantic color roles ---------------- */
  --bg-app:            var(--dp-warm-cream);
  --bg-card:           var(--dp-soft-oat);
  --bg-card-elevated:  var(--dp-elevated-card);
  --bg-overlay:        rgba(247, 241, 231, 0.85);

  --fg-1:              var(--dp-soft-charcoal);   /* primary text */
  --fg-2:              #6F6258;                   /* secondary text */
  --fg-3:              #9A8B7D;                   /* muted text / placeholder */
  --fg-on-accent:      #FFF8EF;                   /* text on terracotta */

  --accent:            var(--dp-terracotta);      /* primary action */
  --accent-secondary:  var(--dp-muted-denim);     /* save / collection */
  --accent-positive:   var(--dp-soft-sage);       /* complete / calm */
  --accent-highlight:  var(--dp-honey-yellow);    /* small badges, celebrations */
  --accent-tender:     var(--dp-blush-coral);     /* guilt / tender states */

  --stroke:            #E2D3C0;                   /* dividers / hairlines */
  --stroke-strong:     #D8BE9A;

  --shadow-soft:       rgba(74, 44, 30, 0.10);
  --shadow-softer:     rgba(74, 44, 30, 0.06);
  --shadow-stronger:   rgba(74, 44, 30, 0.16);

  /* ---------------- Type families ---------------- */
  --font-sans:    'Nunito', 'SF Pro Rounded', 'Avenir Next Rounded',
                  ui-rounded, system-ui, -apple-system, sans-serif;
  --font-serif:   'Fraunces', 'Lora', Georgia, 'Times New Roman', serif;

  /* ---------------- Type scale ---------------- */
  --fs-quote-xl:  34px;   /* hero affirmation */
  --fs-quote:     28px;   /* standard quote card */
  --fs-h1:        32px;
  --fs-h2:        24px;
  --fs-h3:        20px;
  --fs-body:      17px;
  --fs-body-lg:   19px;
  --fs-caption:   14px;
  --fs-label:     12px;
  --fs-button:    17px;

  --lh-tight:     1.25;
  --lh-quote:     1.3;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --tracking-label: 0.06em;

  /* ---------------- Shape & spacing ---------------- */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  18px;   /* small buttons */
  --r-lg:  22px;   /* primary button */
  --r-xl:  28px;   /* cards */
  --r-2xl: 32px;   /* large cards & modals */
  --r-3xl: 36px;   /* large quote card */
  --r-pill: 999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;

  --card-pad:    28px;
  --card-pad-lg: 32px;

  /* ---------------- Elevation ---------------- */
  --elev-1: 0 1px 2px var(--shadow-softer);
  --elev-2: 0 4px 14px var(--shadow-soft);
  --elev-3: 0 8px 24px var(--shadow-soft);
  --elev-4: 0 14px 36px var(--shadow-stronger);

  /* ---------------- Motion ---------------- */
  --t-card:    .35s cubic-bezier(.22, .61, .36, 1);
  --t-press:   .12s cubic-bezier(.4, 0, .2, 1);
  --t-screen:  .30s cubic-bezier(.22, .61, .36, 1);
  --t-float:   4s ease-in-out;
}

/* ---------------- Base element styles ---------------- */
html, body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-tight); }

p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); margin: 0; }
.p-lg     { font-size: var(--fs-body-lg); }
.caption  { font-size: var(--fs-caption); color: var(--fg-2); }
.muted    { color: var(--fg-3); }
.label    {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 700;
}

/* Quotes, the heart of the brand */
.quote, blockquote {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  color: var(--fg-1);
  text-wrap: pretty;
  font-feature-settings: "ss01", "ss02";
}
.quote-xl { font-size: var(--fs-quote-xl); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--dp-cocoa-brown); }

/* ---------------- Utility classes used across previews ---------------- */
.dp-card {
  background: var(--bg-card-elevated);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
  padding: var(--card-pad);
}

.dp-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--fg-2);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.dp-chip[aria-selected="true"],
.dp-chip.is-selected {
  background: var(--accent);
  color: var(--fg-on-accent);
}

.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 24px;
  border: none;
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--t-press), background var(--t-press);
}
.dp-btn:active { transform: scale(.97); }

.dp-btn--primary {
  background: var(--accent);
  color: var(--fg-on-accent);
  box-shadow: 0 6px 14px rgba(198, 107, 61, .25);
}
.dp-btn--primary:hover { background: #B85E32; }

.dp-btn--secondary {
  background: var(--bg-card);
  color: var(--dp-cocoa-brown);
  border: 1px solid var(--stroke);
}
.dp-btn--secondary:hover { background: #E6D6BD; }

.dp-btn--ghost {
  background: transparent;
  color: var(--fg-2);
}
.dp-btn--ghost:hover { color: var(--fg-1); }