/* ============================================================
   PIPO SAÚDE — BRAND SYSTEM
   Foundation tokens, fonts, and primitives.
   This is the single source of truth for brand-level work:
   presentations, documents, and internal/external materials.
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */
/* Season Serif — the brand voice. Display & headlines only. */
@font-face {
  font-family: "Season Serif";
  src: url("fonts/SeasonSerif-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Manrope — the working voice. Body, UI, captions, data. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");

:root {
  /* ---- Base neutra (use MAIS que tudo) -------------------- */
  /* Branco e preto dominam. As cores de marca abaixo são acento. */
  --pipo-white:        #ffffff; /* PANTONE WHITE  · superfície principal */
  --pipo-black:        #000000; /* C0 M0 Y0 K100  · texto e ênfase       */

  /* ---- Cores de marca (Pantone-matched, como acento) ------ */
  /* Navy aposentado: substituído por preto na aplicação. Token mantido por compatibilidade. */
  --pipo-navy:         #060d41; /* PANTONE 295 · legado */
  --pipo-blue:         #1527a9; /* PANTONE 286     */
  --pipo-blue-mid:     #3370d1; /* PANTONE 285     */
  --pipo-blue-light:   #a2ceff; /* PANTONE 283     */
  --pipo-coral:        #de785c; /* PANTONE 7576    */
  --pipo-peach:        #e7b194; /* PANTONE 720     */
  --pipo-sand:         #cebca6; /* PANTONE 4745    */
  --pipo-cream:        #faf8ee; /* PANTONE 9224 50 */
  --pipo-cream-deep:   #f6ecdb; /* PANTONE 9224    */
  --pipo-warm-white:   #faf2ee; /* PANTONE 9021    */

  /* ---- Pipo Cuida (submarca) ------------------------------ */
  /* A submarca de cuidado, dominantemente azul. */
  --cuida-blue:        #2c5fc9; /* azul forte · superfície e ênfase */
  --cuida-blue-deep:   #1f49a3; /* azul profundo · gradientes       */
  --cuida-blue-light:  #a9cbf5; /* azul claro · apoio                */
  --cuida-cream:       #f7f3e8; /* creme · respiro                   */

  /* ---- Coral / Primary ramp ------------------------------- */
  --coral-100: #fbeeea;
  --coral-200: #f2c2b2;
  --coral-400: #de785c;
  --coral-600: #bb6c43;
  --coral-700: #894e2f;
  --coral-900: #5a311c;

  /* ---- Blue-slate ramp ------------------------------------ */
  --slate-100: #dbe2f1;
  --slate-200: #a8badf;
  --slate-400: #7295cc;
  --slate-600: #54709c;
  --slate-700: #394d6d;
  --slate-900: #202d42;

  /* ---- Sand ramp ------------------------------------------ */
  --sand-100: #eaded1;
  --sand-300: #ccb499;
  --sand-500: #a28f79;
  --sand-600: #7a6b5a;
  --sand-700: #54493d;
  --sand-900: #312a22;

  /* ---- Neutral / Grey ramp -------------------------------- */
  --grey-100: #f1f0f0;
  --grey-200: #cdc8c7;
  --grey-400: #a9a19d;
  --grey-600: #837c79;
  --grey-700: #5e5957;
  --grey-900: #3c3837;

  /* ---- Semantic roles ------------------------------------- */
  --bg:           var(--pipo-white);
  --bg-elevated:  var(--pipo-white);
  --ink:          var(--pipo-black);
  --ink-soft:     var(--slate-600);
  --ink-muted:    var(--grey-600);
  --line:         color-mix(in srgb, var(--pipo-black) 12%, transparent);
  --accent:       var(--pipo-coral);

  /* ---- Type families -------------------------------------- */
  --font-display: "Season Serif", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Type scale (px) ------------------------------------ */
  --t-display-xl: 96px;
  --t-display:    66px;
  --t-h1:         46px;
  --t-h2:         34px;
  --t-h3:         26px;
  --t-body-lg:    20px;
  --t-body:       16px;
  --t-caption:    14px;
  --t-micro:      12px;

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

  /* ---- Radii & elevation ---------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06);
}

/* ---- Base primitives (opt-in via .pipo) -------------------- */
.pipo-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; }
.pipo-body    { font-family: var(--font-body); font-weight: 500; line-height: 1.55; }