/* ============================================================
   NutriVIDA — design tokens
   Editorial wellness palette: warm cream surfaces, sage primary,
   coral + lavender accents. Reserved for global atoms only.
   Component styles live in app.css.
   ============================================================ */

:root {
  /* ---- ResolVIDA brand palette ------------------------------ */
  --rv-green:        #3A9E7E;   /* primary action, brand */
  --rv-green-deep:   #2C7B61;   /* hover / pressed */
  --rv-green-mist:   #D5EBE2;   /* surfaces, badges */
  --rv-salmon:       #E89B85;   /* warm accent — energia */
  --rv-salmon-soft:  #F7D8CE;
  --rv-lilac:        #B8A0C9;   /* cool accent — reflexão */
  --rv-lilac-soft:   #E6DDEE;
  --rv-teal:         #4FB0A5;   /* gradient partner do verde */
  --rv-beige:        #F5E6D3;   /* surface acolhedor */

  /* ---- Neutral, paper-like ---------------------------------- */
  --rv-cream:        #FAF6EF;   /* app background, "papel" */
  --rv-cream-deep:   #F0E9DC;   /* recessed surface */
  --rv-ink:          #1F2A26;   /* text, near-black com verde */
  --rv-ink-soft:     #4A5A53;   /* body secondary */
  --rv-muted:        #8A9890;   /* helper, captions */
  --rv-line:         #E6DCC9;   /* hairline divisor */
  --rv-white:        #FFFFFF;

  /* ---- Locked / aspirational gold ---------------------------- */
  --rv-gold:         #C8965A;   /* pequeno cadeado Pro */
  --rv-gold-soft:    #F2E2C8;

  /* ---- Semantic --------------------------------------------- */
  --rv-success:      #5BAE7F;
  --rv-warning:      #D89455;
  --rv-danger:       #C66A6A;

  /* ---- Macro colours (heredados das ervas) ------------------ */
  --macro-protein:   #C66A6A;   /* terracota */
  --macro-carb:      #D89455;   /* trigo */
  --macro-fat:       #B8A0C9;   /* lilás */

  /* ---- Typography ------------------------------------------- */
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.375rem;
  --fs-xl:    1.875rem;
  --fs-2xl:   2.5rem;
  --fs-3xl:   3.5rem;
  --fs-4xl:   5rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-body:   1.55;
  --lh-loose:  1.75;

  /* ---- Radii (orgânicos) ------------------------------------ */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---- Sombras suaves (long shadows) ------------------------ */
  --shadow-petal:   0 4px 18px -10px rgba(58, 99, 79, 0.18);
  --shadow-lift:    0 14px 40px -22px rgba(58, 99, 79, 0.28),
                    0 2px 6px -2px rgba(58, 99, 79, 0.08);
  --shadow-warm:    0 24px 60px -30px rgba(200, 150, 90, 0.30),
                    0 2px 4px -2px rgba(80, 60, 40, 0.06);
  --shadow-inner:   inset 0 1px 2px rgba(31, 42, 38, 0.06);
  --ring-focus:     0 0 0 3px rgba(58, 158, 126, 0.28);

  /* ---- Spacing ---------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-10: 56px;
  --s-12: 72px;
  --s-16: 96px;

  /* ---- Layout ----------------------------------------------- */
  --content-max:    560px;     /* PWA é mobile-first; cap em ~tablet */
  --landing-max:    1100px;
  --header-h:       64px;

  /* ---- Motion ----------------------------------------------- */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:      160ms;
  --t-base:      260ms;
  --t-slow:      460ms;
}

/* ============================================================
   Reset suave, não agressivo
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  /* `clip` is stricter than `hidden` — same horizontal containment but
     doesn't establish a scroll container, so it can't be defeated by a
     nested `position: sticky` or focus-scroll. */
  overflow-x: clip;
  max-width: 100vw;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--rv-ink);
  background: var(--rv-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Respect the iPhone notch / dynamic-island safe areas in landscape.
     In portrait these resolve to 0 — harmless. */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

img, svg, video, canvas { display: block; max-width: 100%; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; border: 0; background: transparent; }

a {
  color: var(--rv-green-deep);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-soft);
}
a:hover { color: var(--rv-green); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Paper grain — subtle, never busy.
   Applied to <body> via app.css so tokens.css stays atom-only. */