/* ============================================================
   Pensativa — Design Tokens
   Editorial · Wellness · Botânica Contemporânea
   Fonts: Cormorant Garamond (serif display) + Alegreya Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
  /* ── BRAND PALETTE ────────────────────────────────────────── */
  /* Ink — primary text, deep ribbons, footer */
  --p-ink:              #2C3326;   /* near-black with olive hint */
  --p-forest:           #42563A;   /* deep botanical, used for emphasis text */

  /* Greens — naturalness, calm, "validated data" */
  --p-leaf:             #6B8E4E;   /* primary brand green (CTA on dark) */
  --p-sage:             #8CA672;   /* softer companion green */
  --p-olive-soft:       #A8BC8F;   /* tinted backgrounds */

  /* Warm accents — energy, curiosity, "community" voice */
  --p-terracotta:       #D97342;   /* primary CTA accent */
  --p-terracotta-deep:  #C76336;   /* hover/press for CTAs */
  --p-apricot:          #F5A962;   /* highlight, tangerine */
  --p-gold-soft:        #F8C98D;   /* warm tint, used in "em validação" */

  /* Paper / cream / surface system */
  --p-blush:            #FDEEE0;   /* lightest cream (page background) */
  --p-paper:            #F1E6D4;   /* deeper cream (bege) */
  --p-paper-warm:       #FAF7F0;   /* warm white surface */
  --p-surface:          #FFFAF2;   /* card background */
  --p-surface-raised:   #FFFFFF;   /* highest elevation */

  /* Lines & semantic */
  --p-line-soft:        rgba(44, 51, 38, 0.13);
  --p-line-botanical:   rgba(107, 142, 78, 0.24);

  --p-status-validated:  var(--p-leaf);        /* dados confirmados */
  --p-status-community:  var(--p-ink);         /* informação comunitária */
  --p-status-pending:    var(--p-apricot);     /* em validação */
  --p-status-incomplete: var(--p-terracotta);  /* aguardando confirmação */

  /* ── SEMANTIC ALIASES ─────────────────────────────────────── */
  --bg:                 var(--p-blush);
  --bg-alt:             var(--p-paper);
  --bg-warm:            var(--p-paper-warm);
  --surface:            var(--p-surface);
  --fg:                 var(--p-ink);
  --fg-muted:           rgba(44, 51, 38, 0.72);
  --fg-soft:            rgba(44, 51, 38, 0.58);
  --fg-on-dark:         var(--p-blush);

  --accent:             var(--p-terracotta);
  --accent-hover:       var(--p-terracotta-deep);
  --accent-soft:        var(--p-apricot);
  --leaf:               var(--p-leaf);

  --border:             var(--p-line-soft);
  --border-leaf:        var(--p-line-botanical);
  --ring:               rgba(217, 115, 66, 0.45);

  /* ── TYPOGRAPHY ───────────────────────────────────────────── */
  --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Alegreya Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Display sizes — fluid, serif */
  --fs-display-xl: clamp(3.2rem, 6vw, 5rem);   /* hero */
  --fs-display-lg: clamp(2.4rem, 4.6vw, 3.8rem);
  --fs-display-md: clamp(1.9rem, 3.2vw, 2.65rem);
  --fs-display-sm: clamp(1.4rem, 2.4vw, 1.8rem);

  /* Body sizes — sans */
  --fs-lead:    1.18rem;
  --fs-body:    1rem;
  --fs-small:   0.92rem;
  --fs-meta:    0.82rem;
  --fs-eyebrow: 0.7rem;     /* uppercase tracking labels */
  --fs-chip:    0.72rem;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-display: -0.015em;
  --tracking-body:    0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.22em;

  /* Line heights */
  --lh-display: 1.08;
  --lh-tight:   1.18;
  --lh-body:    1.65;

  /* ── SPACING (4px base, but with editorial breathing room) ── */
  --space-2xs: 0.25rem;  /*  4 */
  --space-xs:  0.5rem;   /*  8 */
  --space-sm:  0.75rem;  /* 12 */
  --space-md:  1rem;     /* 16 */
  --space-lg:  1.5rem;   /* 24 */
  --space-xl:  2rem;     /* 32 */
  --space-2xl: 3rem;     /* 48 */
  --space-3xl: 5rem;     /* 80 — section padding */
  --space-4xl: 8rem;     /* 128 */

  /* ── RADII — generous, paper-like ─────────────────────────── */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   16px;   /* inputs */
  --radius-lg:   20px;
  --radius-xl:   24px;   /* default card */
  --radius-2xl:  28px;
  --radius-pill: 999px;  /* buttons, chips */

  /* ── SHADOWS — soft, warm, never harsh ────────────────────── */
  --shadow-soft:  0 2px 12px -4px rgba(44, 51, 38, 0.08), 0 8px 32px -12px rgba(44, 51, 38, 0.12);
  --shadow-card:  0 1px 2px rgba(44, 51, 38, 0.04), 0 8px 24px -8px rgba(44, 51, 38, 0.10);
  --shadow-hover: 0 4px 16px -4px rgba(44, 51, 38, 0.12), 0 16px 48px -12px rgba(44, 51, 38, 0.18);
  --shadow-paper: 0 18px 45px rgba(44, 51, 38, 0.08);

  /* ── GRADIENTS ────────────────────────────────────────────── */
  --grad-cream:     linear-gradient(180deg, #FDEEE0 0%, #F1E6D4 100%);
  --grad-warm:      linear-gradient(120deg, #D97342 0%, #F5A962 100%);
  --grad-leaf:      linear-gradient(135deg, #6B8E4E 0%, #8CA672 100%);
  --grad-editorial: linear-gradient(135deg, #2C3326 0%, #42563A 100%);
  --grad-page-bg:
    radial-gradient(circle at 12% 8%, rgba(245, 169, 98, 0.13), transparent 32rem),
    radial-gradient(circle at 88% 4%, rgba(140, 166, 114, 0.15), transparent 28rem),
    linear-gradient(180deg, #FFF8EF 0%, #F1E6D4 58%, #EFE2CF 100%);

  /* ── MOTION ───────────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    0.18s;
  --dur-base:    0.28s;
  --dur-slow:    0.5s;

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --container-max: 1400px;
  --container-narrow: 900px;
  --touch-target: 44px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Apply via classes or inherit through nested elements.
   ============================================================ */

.p-display-xl,
.p-display-lg,
.p-display-md,
.p-display-sm,
.p-h1, .p-h2, .p-h3, .p-h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--p-ink);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.p-display-xl { font-size: var(--fs-display-xl); letter-spacing: var(--tracking-tight); line-height: 1.02; }
.p-display-lg { font-size: var(--fs-display-lg); }
.p-display-md { font-size: var(--fs-display-md); }
.p-display-sm { font-size: var(--fs-display-sm); }

.p-h1 { font-size: clamp(2.35rem, 4.6vw, 3.8rem); letter-spacing: -0.03em; line-height: 1.08; }
.p-h2 { font-size: clamp(1.8rem, 3.2vw, 2.65rem); }
.p-h3 { font-size: clamp(1.28rem, 2.2vw, 1.75rem); line-height: 1.18; }
.p-h4 { font-size: 1.25rem; line-height: 1.25; }

.p-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 700;
  color: var(--p-leaf);
}

.p-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.p-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--p-ink);
  text-wrap: pretty;
}

.p-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-muted);
}

.p-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--fg-soft);
}

.p-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--p-forest);
}

/* Editorial italic accent — used inline inside display headings
   (e.g. "Cannabis medicinal, <em>sem se perder no caminho</em>")    */
.p-display-em,
.p-display-lg em,
.p-display-xl em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--p-terracotta);
}

/* ============================================================
   BASE — opt-in by adding .pensativa to a wrapper, or just
   relying on the tokens above.
   ============================================================ */

.pensativa,
body.pensativa {
  background: var(--grad-page-bg);
  color: var(--p-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pensativa ::selection { background: rgba(245, 201, 141, 0.55); }