/* ============================================================
   Amor em Dia — Foundations
   Colors + Typography tokens
   ============================================================ */

/* ---- Google Fonts (substitutes, see README) -------------- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* -------- Brand core ------------------------------------ */
  --aed-pink:            #F4A6AC;   /* primary rose — heart outline + wordmark */
  --aed-pink-deep:       #E88A92;   /* hover / pressed pink */
  --aed-pink-soft:       #FAD0D3;   /* card tints, soft fills */
  --aed-pink-mist:       #FDE9EB;   /* page background wash */
  --aed-pink-blush:      #FFF5F6;   /* subtle surface tint */
  --aed-pink-signature:  #FDD9DB;   /* the faint "by Ana Gandia" script color */

  --aed-sun:             #FEF387;   /* colored-logo sun half */
  --aed-sun-deep:        #F9E25A;
  --aed-sun-soft:        #FFF9C9;

  --aed-ocean:           #37D3D6;   /* colored-logo wave half */
  --aed-ocean-deep:      #1FB3B6;
  --aed-ocean-soft:      #B8EFF0;

  /* Natural / botanical accents (soap & wellness context) */
  --aed-sage:            #B8C9A8;
  --aed-sage-deep:       #8AA37A;
  --aed-cream:           #FBF6EC;
  --aed-kraft:           #C9A67A;   /* artisan packaging brown */

  /* -------- Neutrals -------------------------------------- */
  --aed-ink:             #3C2A2D;   /* warm near-black, a touch of rose */
  --aed-ink-soft:        #6B4F55;
  --aed-mute:            #9C8288;
  --aed-line:            #F0DADD;   /* hairline dividers — pink-tinted */
  --aed-line-strong:     #E4BEC3;
  --aed-paper:           #FFFDFB;   /* primary page background */
  --aed-surface:         #FFFFFF;   /* card surface */
  --aed-surface-2:       #FBF6EC;   /* warm cream surface */

  /* -------- Semantic -------------------------------------- */
  --aed-success:         #7FB28A;
  --aed-warn:            #E8A961;
  --aed-danger:          #D97068;
  --aed-info:            #6FB8D8;

  /* -------- Semantic tokens (role-based) ------------------ */
  --fg-1:                var(--aed-ink);
  --fg-2:                var(--aed-ink-soft);
  --fg-3:                var(--aed-mute);
  --fg-brand:            var(--aed-pink-deep);
  --fg-on-pink:          #ffffff;
  --fg-on-cream:         var(--aed-ink);

  --bg-page:             var(--aed-paper);
  --bg-surface:          var(--aed-surface);
  --bg-surface-2:        var(--aed-surface-2);
  --bg-tint:             var(--aed-pink-mist);
  --bg-tint-cream:       var(--aed-cream);

  --border-subtle:       var(--aed-line);
  --border-strong:       var(--aed-line-strong);
  --border-brand:        var(--aed-pink);

  /* -------- Typography ------------------------------------ */
  /* Display / wordmark — a rounded, thin-stroke geometric sans  */
  /* Logo uses a light-weight rounded geometric (bespoke). Nearest Google match: Quicksand Light. */
  --font-display:        'Quicksand', 'Nunito', 'Helvetica Neue', system-ui, sans-serif;
  /* Body — warm, friendly sans  */
  --font-body:           'Quicksand', 'Nunito', system-ui, sans-serif;
  /* Script / signature — mimics "by Ana Gandia" handwriting */
  --font-script:         'Dancing Script', 'Brush Script MT', cursive;
  /* Serif accent — for editorial notes, soap labels, recipe cards */
  --font-serif:          'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-mono:           ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-h1:               clamp(40px, 5vw, 64px);
  --fs-h2:               clamp(30px, 3.2vw, 44px);
  --fs-h3:               clamp(22px, 2.2vw, 28px);
  --fs-h4:               18px;
  --fs-body:             16px;
  --fs-small:            14px;
  --fs-micro:            12px;

  --lh-tight:            1.1;
  --lh-display:          1.15;
  --lh-body:             1.6;
  --lh-loose:            1.8;

  --tracking-wide:       0.08em;     /* uppercase eyebrows */
  --tracking-normal:     0em;
  --tracking-tight:      -0.01em;

  /* -------- Radii ----------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* -------- Shadows (soft, powdery) ----------------------- */
  --shadow-xs:  0 1px 2px rgba(184, 120, 128, 0.08);
  --shadow-sm:  0 2px 8px rgba(184, 120, 128, 0.10);
  --shadow-md:  0 8px 24px rgba(184, 120, 128, 0.14);
  --shadow-lg:  0 18px 40px rgba(184, 120, 128, 0.18);
  --shadow-inner: inset 0 1px 2px rgba(184, 120, 128, 0.10);

  /* -------- Spacing scale --------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;

  /* -------- Motion ---------------------------------------- */
  --ease-soft:   cubic-bezier(.25,.8,.35,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ============================================================
   Semantic element styles — opt-in via .aed-type
   ============================================================ */
.aed-type h1, .aed-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
  margin: 0 0 var(--s-4);
}
.aed-type h2, .aed-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}
.aed-type h3, .aed-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}
.aed-type h4, .aed-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0 0 var(--s-2);
}
.aed-type p, .aed-p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}
.aed-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-brand);
}
.aed-script {
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--aed-pink-signature);
}
.aed-serif {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-2);
}
.aed-small { font-size: var(--fs-small); color: var(--fg-3); }

/* ============================================================
   Global base (optional — use .aed-root on container)
   ============================================================ */
.aed-root {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
}