/* ============================================================
   Fundacja PK KAR — Design Tokens
   Colors, typography, spacing, shadows, radii
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary — Teal (trust, calm, public sector friendly) */
  --teal-50:  #ecfdf5;
  --teal-100: #d1fae5;
  --teal-200: #a7f3d0;
  --teal-300: #6ee7b7;
  --teal-400: #34d399;
  --teal-500: #14b8a6;
  --teal-600: #0f766e;   /* PRIMARY */
  --teal-700: #0d6b63;
  --teal-800: #115e59;
  --teal-900: #0c4a44;

  /* Accent — Amber (warmth, call-to-action, donation) */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-300: #fcd34d;
  --amber-500: #f59e0b;   /* ACCENT */
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-ink: #3b2600;   /* text on amber */

  /* Neutrals — Slate */
  --ink:    #0f172a;   /* headings, primary text */
  --body:   #334155;   /* body copy */
  --muted:  #64748b;   /* secondary text, captions */
  --line:   #e2e8f0;   /* borders, dividers */
  --bg:     #ffffff;
  --bg-alt: #f1f6f5;   /* warm-tinted off-white section bg */
  --bg-soft:#f8fafc;

  /* Semantic */
  --success: var(--teal-600);
  --warning: var(--amber-600);
  --danger:  #dc2626;
  --info:    #0284c7;

  /* Footer / dark surfaces */
  --dark-bg:    #0f172a;
  --dark-text:  #cbd5e1;
  --dark-muted: #94a3b8;
  --dark-line:  #1e293b;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-display: clamp(2rem, 5vw, 3.25rem);    /* H1 hero */
  --fs-h2:      clamp(1.5rem, 3.2vw, 2.1rem); /* section headings */
  --fs-h3:      1.15rem;                       /* card titles */
  --fs-lead:    1.2rem;                        /* hero lead */
  --fs-body:    1rem;
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.78rem;                       /* kickers */
  --fs-meta:    0.82rem;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.65;

  /* Letter spacing */
  --ls-tight:    -0.02em;
  --ls-tighter:  -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-eyebrow:  0.08em;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-section: 76px; /* vertical rhythm between sections */

  /* ---------- LAYOUT ---------- */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --header-h: 68px;

  /* ---------- RADII ---------- */
  --radius-sm:  8px;
  --radius-md:  10px;   /* buttons, mark */
  --radius-lg:  12px;   /* CTA buttons, inner cards */
  --radius-xl:  16px;   /* main cards */
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 10px 30px rgba(15,118,110,.08);   /* signature teal-tinted card shadow */
  --shadow-lg: 0 20px 40px rgba(15,118,110,.12);
  --shadow-cta: 0 8px 20px rgba(217,119,6,.30);    /* amber button hover glow */
  --shadow-focus: 0 0 0 3px rgba(15,118,110,.25);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast:   .12s ease;
  --t-base:   .2s ease;
  --t-slow:   .25s var(--ease-out);

  /* ---------- GRADIENTS / BACKGROUNDS ---------- */
  --hero-gradient:
    radial-gradient(900px 400px at 80% -10%, rgba(245,158,11,.12), transparent 60%),
    linear-gradient(180deg, #ecfdf5 0%, #f1f6f5 100%);
  --teal-tint-bg: #ecfdf5;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.ds-base { font-family: var(--font-sans); color: var(--body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11","ss01"; }

.ds-h1 { font-size: var(--fs-display); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); margin: 0 0 .5em; }
.ds-h2 { font-size: var(--fs-h2);      font-weight: var(--fw-bold);  letter-spacing: var(--ls-tighter); line-height: var(--lh-tight); color: var(--ink); margin: 0 0 .5em; }
.ds-h3 { font-size: var(--fs-h3);      font-weight: var(--fw-bold);  line-height: var(--lh-snug);  color: var(--ink); margin: 0 0 .35em; }
.ds-lead     { font-size: var(--fs-lead);    color: var(--body); }
.ds-body     { font-size: var(--fs-body);    color: var(--body); }
.ds-small    { font-size: var(--fs-small);   color: var(--muted); }
.ds-eyebrow  { font-size: var(--fs-eyebrow); color: var(--teal-800); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.ds-meta     { font-size: var(--fs-meta);    color: var(--muted); }