/* Sorrir+ webfonts.
   NOTE: The brand's exact fonts are not provided. These Google Fonts are close
   substitutions for the look described in the brand manual:
   - Wordmark / logo: rounded friendly bold  -> Baloo 2
   - Headings (post titles): geometric bold   -> Poppins
   - Body copy: clean, legible, warm          -> Mulish
   If you have the original font files, drop them in and replace this @import. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ===========================================================================
   Sorrir+ — Color tokens
   Rule of contrast (from brand manual):
   - Text is always cream/white on GREEN or BLUE grounds.
   - Text is BLUE or GREEN on cream/lime grounds.
   - The "+" and key accents use LIME when the ground allows.
   =========================================================================== */
:root {
  /* --- Brand greens (institutional) --------------------------------------- */
  --green-950: #0E3A20;   /* deepest, for shadows / overlays */
  --green-900: #15512D;   /* institutional dark — primary surface */
  --green-800: #1B6B38;   /* primary green */
  --green-700: #1E7B3F;
  --green-600: #2E9E4B;   /* bright storefront green */
  --green-500: #5BA84A;   /* medium green — graphic squiggles */
  --green-400: #7FBE6A;

  /* --- Lime accent -------------------------------------------------------- */
  --lime-600: #8FB52E;
  --lime-500: #A6CE39;    /* signature accent — the "+", smile, CTAs */
  --lime-400: #B9DC5E;
  --lime-200: #DDEBA8;

  /* --- Royal / navy blue (secondary) ------------------------------------- */
  --blue-900: #142A66;
  --blue-800: #1E3A8C;    /* secondary brand blue */
  --blue-700: #2A4BA8;
  --blue-500: #4566C4;
  --blue-200: #BFCAE8;

  /* --- Cream / neutrals --------------------------------------------------- */
  --cream-50:  #FBFAF4;
  --cream-100: #F4F1E8;   /* off-white base surface */
  --cream-200: #EAE6D6;
  --cream-300: #DCD7C2;
  --white:     #FFFFFF;

  /* --- Functional grays (UI chrome on light surfaces) -------------------- */
  --ink-900: #16241B;     /* near-black with a green cast */
  --ink-700: #34453A;
  --ink-500: #5C6B60;     /* muted body on light */
  --ink-300: #93A096;
  --line-200: #DFE3D8;    /* hairline borders on light */
  --line-100: #ECEFE6;

  /* --- Semantic state colors --------------------------------------------- */
  --success: #2E9E4B;
  --warning: #E0A526;
  --danger:  #C8413B;
  --info:    #2A4BA8;

  /* =========================================================================
     Semantic aliases — prefer these in components
     ========================================================================= */
  --brand-primary:    var(--green-800);
  --brand-primary-dk: var(--green-900);
  --brand-secondary:  var(--blue-800);
  --brand-accent:     var(--lime-500);

  --surface-dark:     var(--green-900);   /* hero / post ground (green) */
  --surface-dark-alt: var(--blue-800);    /* alternate ground (blue) */
  --surface-base:     var(--cream-100);   /* default light page */
  --surface-card:     var(--white);
  --surface-sunken:   var(--cream-200);

  --text-on-dark:     var(--cream-100);   /* cream/white over green or blue */
  --text-on-dark-mut: rgba(244,241,232,0.72);
  --text-strong:      var(--ink-900);     /* on light */
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-accent:      var(--lime-600);
  --text-link:        var(--blue-800);

  --border-subtle:    var(--line-200);
  --border-strong:    var(--ink-300);

  --focus-ring:       var(--lime-500);

  /* WhatsApp green (conversion CTA — brand-adjacent utility) */
  --whatsapp: #25D366;
}

/* ===========================================================================
   Sorrir+ — Typography tokens
   Three roles: WORDMARK (Baloo 2), DISPLAY/HEADINGS (Poppins), BODY (Mulish).
   Never mix more than 2 families in a single piece (wordmark counts only in
   the logo). Headings = Poppins; everything else = Mulish.
   =========================================================================== */
:root {
  /* --- Families ----------------------------------------------------------- */
  --font-wordmark: 'Baloo 2', 'Quicksand', system-ui, sans-serif;
  --font-display:  'Poppins', system-ui, sans-serif;       /* titles */
  --font-body:     'Mulish', system-ui, sans-serif;        /* copy */

  /* --- Weights ------------------------------------------------------------ */
  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semibold:600;   /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-extrabold:800;  /* @kind font */

  /* --- Type scale --------------------------------------------------------- */
  --fs-display: 4rem;     /* @kind font */
  --fs-h1: 2.75rem;       /* @kind font */
  --fs-h2: 2.125rem;      /* @kind font */
  --fs-h3: 1.5rem;        /* @kind font */
  --fs-h4: 1.25rem;       /* @kind font */
  --fs-lead: 1.1875rem;   /* @kind font */
  --fs-body: 1rem;        /* @kind font */
  --fs-sm: 0.875rem;      /* @kind font */
  --fs-xs: 0.75rem;       /* @kind font */

  /* --- Line heights ------------------------------------------------------- */
  --lh-tight: 1.04;    /* @kind other */
  --lh-snug: 1.18;     /* @kind other */
  --lh-normal: 1.5;    /* @kind other */
  --lh-relaxed: 1.65;  /* @kind other */

  /* --- Letter spacing ----------------------------------------------------- */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0;      /* @kind other */
  --ls-wide: 0.08em;   /* @kind other */
  --ls-wider: 0.16em;  /* @kind other */

  /* --- Semantic roles ----------------------------------------------------- */
  --text-display-font: var(--font-display);
  --text-display-weight: var(--fw-extrabold);
  --text-heading-font: var(--font-display);
  --text-heading-weight: var(--fw-bold);
  --text-body-font: var(--font-body);
  --text-body-weight: var(--fw-regular);
  --text-eyebrow-font: var(--font-display);
  --text-eyebrow-weight: var(--fw-semibold);
}

/* ===========================================================================
   Sorrir+ — Spacing, radii, shadow & layout tokens
   Soft, friendly, rounded — matches the rounded wordmark. Generous breathing
   room around the logo and content ("área de respiro").
   =========================================================================== */
:root {
  /* --- Spacing scale (4px base) ------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* --- Radii — soft & rounded -------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;     /* default card / input */
  --radius-lg: 24px;     /* feature cards */
  --radius-xl: 32px;
  --radius-pill: 999px;  /* buttons, chips, badges */

  /* --- Shadows — soft, warm, low-contrast -------------------------------- */
  --shadow-xs: 0 1px 2px rgba(14,58,32,0.06);
  --shadow-sm: 0 2px 8px rgba(14,58,32,0.08);
  --shadow-md: 0 6px 20px rgba(14,58,32,0.10);
  --shadow-lg: 0 16px 40px rgba(14,58,32,0.14);
  --shadow-focus: 0 0 0 3px rgba(166,206,57,0.55);   /* lime focus ring */

  /* --- Layout ------------------------------------------------------------- */
  --container: 1120px;
  --container-narrow: 760px;
  --post-square: 1080px;     /* IG feed art width */
  --post-portrait-h: 1350px; /* IG feed portrait height */
  --story-w: 1080px;
  --story-h: 1920px;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur: 220ms;        /* @kind other */
  --dur-slow: 380ms;   /* @kind other */
}