/*
 * Design tokens — Gefässe im Zentrum
 * Źródło: Figma „Klinika", pobrane 2026-07-09.
 * Wszystkie wartości jako CSS Custom Properties — do zmiany w jednym miejscu.
 */

:root {
	/* ============= Kolory: Primary (niebieskie) ============= */
	--gef-primary-50:  #f3f8fc;
	--gef-primary-100: #e6f0f8;
	--gef-primary-200: #c8e0ef;
	--gef-primary-300: #97c7e2;
	--gef-primary-400: #60a9d0;
	--gef-primary-500: #3b8fbc;
	--gef-primary-600: #2b729e;
	/* 700 i 900 nie ma w Figmie — interpoluję sam */
	--gef-primary-700: #26648a;
	--gef-primary-800: #214e6b; /* granat z logo */
	--gef-primary-900: #1a3d54;
	--gef-primary-950: #152b3c;

	/* ============= Kolory: Secondary (koralowe) ============= */
	--gef-secondary-500: #de5655; /* koral z logo */
	--gef-secondary-800: #852625;

	/* ============= Kolory: Mongoose (beżowe) ============= */
	--gef-mongoose-50:  #f8f7f4;
	--gef-mongoose-100: #efece5;
	--gef-mongoose-700: #7e6350;

	/* ============= Kolory: Stone (neutralne) ============= */
	--gef-stone-50:  #fafaf9;
	--gef-stone-200: #e7e5e4;
	--gef-stone-400: #a8a29e;
	--gef-stone-500: #78716c;
	--gef-stone-800: #292524;

	/* ============= Kolory: Gray (opisy kart) ============= */
	--gef-gray-500: #6b7280;

	/* ============= Kolory: System ============= */
	--gef-green:   #34c759;
	--gef-black:   #1a1a1a;
	--gef-white:   #ffffff;

	/* ============= Semantic aliases ============= */
	--gef-color-brand:       var(--gef-primary-800);
	--gef-color-brand-hover: var(--gef-primary-700);
	--gef-color-accent:      var(--gef-secondary-500);
	--gef-color-accent-hover: var(--gef-secondary-800);
	--gef-color-text:        var(--gef-black);
	--gef-color-text-muted:  var(--gef-stone-500);
	--gef-color-heading:     var(--gef-primary-950);
	--gef-color-bg:          var(--gef-white);
	--gef-color-bg-alt:      var(--gef-mongoose-50);
	--gef-color-bg-brand:    var(--gef-primary-800);
	--gef-color-bg-brand-dark: var(--gef-primary-950);
	--gef-color-border:      var(--gef-stone-200);
	--gef-color-surface:     var(--gef-primary-50);

	/* ============= Font ============= */
	--gef-font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;

	/* ============= Skala typograficzna (rozmiary w rem, base 16) ============= */
	/* H1 58px */
	--gef-fs-h1:  3.625rem;
	--gef-lh-h1:  1.2;
	--gef-fw-h1:  600;
	/* H2 48px */
	--gef-fs-h2:  3rem;
	--gef-lh-h2:  1.2;
	--gef-fw-h2:  600;
	/* H3 40px */
	--gef-fs-h3:  2.5rem;
	--gef-lh-h3:  1.2;
	--gef-fw-h3:  600;
	/* H4 33px */
	--gef-fs-h4:  2.0625rem;
	--gef-lh-h4:  1.3;
	--gef-fw-h4:  600;
	/* H5 (brak w Figmie — dodaję sam ~27px) */
	--gef-fs-h5:  1.6875rem;
	--gef-lh-h5:  1.35;
	--gef-fw-h5:  600;
	/* H6 23px Bold */
	--gef-fs-h6:  1.4375rem;
	--gef-lh-h6:  1.4;
	--gef-fw-h6:  700;
	/* H7 19px */
	--gef-fs-h7:  1.1875rem;
	--gef-lh-h7:  1.4;
	--gef-fw-h7:  600;

	/* Body */
	--gef-fs-body-l:  1.1875rem; /* 19px */
	--gef-lh-body-l:  1.6;
	--gef-fs-body-m:  1rem;       /* 16px */
	--gef-lh-body-m:  1.5;
	--gef-fs-body-s:  0.8125rem;  /* 13px */
	--gef-lh-body-s:  1.5;
	--gef-fs-body-xs: 0.6875rem;  /* 11px */
	--gef-lh-body-xs: 1.5;

	--gef-fs-body-light-m: 1rem;  /* Body Light M — 16px light, letter-spacing 2px */
	--gef-lh-body-light-m: 1.5;
	--gef-ls-body-light-m: 0.125rem; /* 2px */

	/* Buttons */
	--gef-fs-btn-l: 1rem;         /* 16px medium */
	--gef-fs-btn-m: 0.8125rem;    /* 13px medium */
	--gef-fw-btn:   500;
	--gef-lh-btn:   1;

	/* ============= Spacing scale ============= */
	--gef-space-1:  0.25rem;   /* 4  */
	--gef-space-2:  0.5rem;    /* 8  */
	--gef-space-3:  0.75rem;   /* 12 */
	--gef-space-4:  1rem;      /* 16 */
	--gef-space-5:  1.25rem;   /* 20 */
	--gef-space-6:  1.5rem;    /* 24 */
	--gef-space-8:  2rem;      /* 32 */
	--gef-space-10: 2.5rem;    /* 40 */
	--gef-space-12: 3rem;      /* 48 */
	--gef-space-16: 4rem;      /* 64 */
	--gef-space-20: 5rem;      /* 80 */
	--gef-space-24: 6rem;      /* 96 */
	--gef-space-32: 8rem;      /* 128 */

	/* ============= Radius ============= */
	--gef-radius-sm:  0.25rem;
	--gef-radius-md:  0.5rem;
	--gef-radius-lg:  0.75rem;
	--gef-radius-xl:  1rem;
	--gef-radius-2xl: 1.5rem;
	--gef-radius-full: 999px;

	/* ============= Shadows ============= */
	--gef-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
	--gef-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
	--gef-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
	--gef-shadow-card: 0 2px 8px rgb(21 43 60 / 0.06);

	/* ============= Layout ============= */
	--gef-container-max: 1280px;
	--gef-container-gutter: clamp(1rem, 4vw, 2.5rem);
	--gef-header-height: 88px;
	--gef-topbar-height: 40px;

	/* ============= Transitions ============= */
	--gef-transition-fast:   150ms ease;
	--gef-transition-normal: 250ms ease;
	--gef-transition-slow:   400ms ease;
}