/* ============================================================
   EWEO Care Design System — Colors & Type
   Brand: EWEO — Agencja Interaktywna z Bełchatowa
   Layout DNA: Zyno (WordPress FSE / Gutenverse)
   Palette: EWEO sage (NOT Zyno blue)
   ============================================================ */

.caresite{
  /* -------- BRAND (accents, CTA) — use sparingly (~10%) -------- */
  --primary:        #355B56;  /* main accent: buttons, links, tags, active icons */
  --primary-light:  #9FB5AA;  /* hover, gradient start, accents on dark */
  --primary-dark:   #294A45;  /* pressed state, gradient end */
  --sage-pale:     #E3EBE6;  /* blob backgrounds, passive icons, hover-on-light */
  --sage-soft:     #EFF3EE;  /* softest section tint, hover field */

  /* -------- NEUTRALS (text, surfaces, structure) -------- */
  --dark:           #263B37;  /* footer, dark portfolio sections */
  --text:           #263B37;  /* headings, body */
  --text-muted:     #5B6D65;  /* secondary paragraphs */
  --text-light:     #697970;  /* placeholders, numbering, captions */
  --off-white:      #F6F7F3;  /* section backgrounds, hover-on-white */
  --white:          #FFFFFF;  /* main canvas, cards */
  --border:         #DCE5DE;  /* card borders, separators */


  /* EWEO Care palette and compatibility aliases */
  --sage:           #9FB5AA;
  --danger:         #A53E36;
  --danger-soft:    #F9EEEB;
  --on-primary:     #FFFFFF;
  --on-dark-accent: #C7D8CD;
  --coral-pale:     var(--sage-pale); /* compatibility with original EWEO components */
  --coral-soft:     var(--sage-soft);
  --shadow-coral:   var(--shadow-brand);

  /* -------- SEMANTIC ALIASES -------- */
  --bg:             var(--off-white);
  --bg-alt:         var(--off-white);
  --bg-tint:        var(--sage-soft);
  --bg-blob:        var(--sage-pale);
  --bg-dark:        var(--dark);
  --fg:             var(--text);
  --fg-muted:       var(--text-muted);
  --fg-light:       var(--text-light);
  --fg-on-dark:     var(--white);
  --accent:         var(--primary);
  --accent-hover:   var(--primary-dark);
  --link:           var(--primary);
  --link-hover:     var(--primary-dark);

  /* -------- TYPE -------- */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  /* Base type scale — Poppins, all weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Display sizes (hero) */
  --fs-display: 75px;     /* h1 hero — 75px desktop */
  --fs-h1:      48px;     /* section h1/h2 */
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-h5:      18px;
  --fs-body:    16px;
  --fs-body-lg: 18px;     /* lead paragraph */
  --fs-body-xl: 20px;     /* hero subtitle */
  --fs-small:   14px;
  --fs-tiny:    12px;

  --lh-tight:   1.1;      /* display */
  --lh-snug:    1.25;     /* headings */
  --lh-normal:  1.5;      /* body */
  --lh-loose:   1.7;      /* long-form */

  --tracking-tight: -0.02em;  /* display & headings */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;    /* eyebrow / uppercase labels */

  /* -------- SPACING & RHYTHM -------- */
  --gap:        1.2rem;        /* Zyno block gap rhythm */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;

  /* -------- RADII -------- */
  --radius-sm:  8px;
  --radius-md:  16px;          /* small cards */
  --radius-lg:  20px;          /* cards default */
  --radius-xl:  24px;          /* large cards */
  --radius-pill: 999px;        /* CTA buttons */

  /* -------- SHADOWS (kept soft) -------- */
  --shadow-xs:  0 1px 2px rgba(38, 59, 55, 0.04);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 10px 20px -4px rgba(38, 59, 55, 0.08);
  --shadow-lg:  0 20px 40px -8px rgba(38, 59, 55, 0.10);
  --shadow-brand: 0 12px 28px -10px rgba(53, 91, 86, 0.35);

  /* -------- BORDERS -------- */
  --border-thin:  1px solid var(--border);
  --border-strong: 1px solid var(--text);

  /* -------- MOTION -------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* -------- LAYOUT -------- */
  --container-max: 1290px;
  --container-narrow: 880px;
}

/* ============================================================
   SEMANTIC ELEMENTS — apply automatically
   ============================================================ */
.caresite,.caresite{
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.caresite) h1,:where(.caresite) h2,:where(.caresite) h3,:where(.caresite) h4,:where(.caresite) h5,:where(.caresite) h6{
  color: var(--fg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

:where(.caresite) h1{ font-size: var(--fs-h1); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
:where(.caresite) h2{ font-size: var(--fs-h2); }
:where(.caresite) h3{ font-size: var(--fs-h3); }
:where(.caresite) h4{ font-size: var(--fs-h4); font-weight: var(--fw-medium); }
:where(.caresite) h5{ font-size: var(--fs-h5); font-weight: var(--fw-medium); }
:where(.caresite) h6{ font-size: var(--fs-body); font-weight: var(--fw-semibold); }

:where(.caresite) .display,:where(.caresite) .hero-title{
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);   /* Zyno hero is 500 not 700 */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

:where(.caresite) p{ margin: 0 0 var(--gap); text-wrap: pretty; }
:where(.caresite) p.lead{ font-size: var(--fs-body-lg); color: var(--fg-muted); }
:where(.caresite) p.muted,:where(.caresite) .muted{ color: var(--fg-muted); }
:where(.caresite) p.small,:where(.caresite) small{ font-size: var(--fs-small); }
:where(.caresite) .eyebrow{
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
}

:where(.caresite) a{
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(.caresite) a:hover{ color: var(--link-hover); }

:where(.caresite) ::selection{ background: var(--sage-pale); color: var(--text); }