/* ================================================================
   MEDI-DENT · tokens.css
   Design system — zmienne CSS
   ================================================================ */

:root {

  /* ── KOLORY ─────────────────────────────────────────────────── */

  --color-navy:        #1B2B4B;
  --color-navy-80:     rgba(27, 43, 75, 0.80);
  --color-navy-60:     rgba(27, 43, 75, 0.60);
  --color-navy-40:     rgba(27, 43, 75, 0.40);
  --color-navy-20:     rgba(27, 43, 75, 0.20);
  --color-navy-12:     rgba(27, 43, 75, 0.12);
  --color-navy-06:     rgba(27, 43, 75, 0.06);

  --color-gold:        #B8935A;
  --color-gold-hover:  #A07840;
  --color-gold-light:  rgba(184, 147, 90, 0.12);

  --color-white:       #FFFFFF;
  --color-bg:          #F6F7F9;
  --color-bg-warm:     #FEFCFA;

  --color-text:        #1B2B4B;
  --color-text-muted:  rgba(27, 43, 75, 0.58);

  --color-border:      rgba(27, 43, 75, 0.09);
  --color-border-mid:  rgba(27, 43, 75, 0.20);

  /* ── TYPOGRAFIA ─────────────────────────────────────────────── */

  --font-display: 'Jost', system-ui, sans-serif;
  --font-body:    'Jost', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-hero: clamp(2.8rem, 6vw, 5rem);

  --leading-tight:  1.12;
  --leading-normal: 1.60;
  --leading-loose:  1.82;

  --tracking-tight:   -0.02em;
  --tracking-normal:  -0.01em;
  --tracking-wide:     0.06em;
  --tracking-widest:   0.14em;

  /* ── SPACING ────────────────────────────────────────────────── */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-py:    clamp(4.5rem, 10vw, 9rem);
  --container-max: 1080px;
  --container-px:  clamp(1.5rem, 5vw, 2.5rem);

  /* ── ANIMACJE ───────────────────────────────────────────────── */

  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 0.18s;
  --dur-mid:  0.40s;
  --dur-slow: 0.75s;
  --dur-xl:   1.10s;

  /* ── ZAOKRĄGLENIA ───────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   20px;
  --radius-pill: 6px;

  /* ── CIENIE ─────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 4px rgba(27, 43, 75, 0.06);
  --shadow-md:  0 4px 20px rgba(27, 43, 75, 0.09), 0 1px 4px rgba(27, 43, 75, 0.05);
  --shadow-lg:  0 8px 40px rgba(27, 43, 75, 0.13), 0 2px 8px rgba(27, 43, 75, 0.07);
  --shadow-nav: 0 1px 0 rgba(27, 43, 75, 0.10);

}