/* =====================================================================
   Design Tokens — Platforma e-wydań (wariant MEDYCZNY / NAUKOWY)
   ---------------------------------------------------------------------
   Single source of truth for color, typography, spacing, radius,
   shadow and motion. Components must reference these tokens, never
   hardcoded values (see docs/08-design-ux-ui.md §11, §12).

   Variant: "Design_medical" — kierunek kliniczny / laboratoryjny / naukowy.
   Ten sam UKŁAD i te same komponenty co bazowy design; zmienia się tylko
   WARTOŚĆ tokenów (kolor + typografia), dzięki czemu motyw jest remapem,
   nie przepisaniem komponentów.

   - petrol / teal (brand)   -> klinika, wiarygodność, marka
   - cyan (accent)           -> CTA, linki, podświetlenia (sygnał "diagnostyczny")
   - zieleń (free)           -> open access / treść otwarta
   - indygo (premium)        -> dostęp płatny, celowo odrębne od cyan CTA
   - chłodne, lekko teal-owe szarości -> struktury, panel, "lab"
   - delikatne statusy        -> premium / sponsored / free / info / błędy
   ===================================================================== */

:root {
  /* ---- Brand palette: Petrol / Teal (primary) — zaufanie kliniczne ---- */
  --navy-50:  #eaf5f6;
  --navy-100: #cce8ea;
  --navy-200: #a1d6da;
  --navy-300: #6dbcc3;
  --navy-400: #3a9aa4;
  --navy-500: #1e7c87;
  --navy-600: #14636e;
  --navy-700: #104f59;
  --navy-800: #0c3d46;
  --navy-900: #082d34;
  --navy-950: #05202640;

  /* ---- Accent palette: Cyan kliniczny — CTA / linki / sygnał ---- */
  --accent-50:  #e6f6fb;
  --accent-100: #c3eaf4;
  --accent-200: #93d8e9;
  --accent-300: #57c0d8;
  --accent-400: #22a3c2;
  --accent-500: #0c87a6;  /* primary accent — cyan diagnostyczny */
  --accent-600: #0a6d88;
  --accent-700: #08566c;

  /* ---- Secondary clinical blue (info / akcenty pomocnicze) ---- */
  --blue-400: #3a9bd0;
  --blue-500: #1f86c4;
  --blue-600: #156ca6;

  /* ---- Neutral / gray scale (chłodne, lekko teal — "lab") ---- */
  --gray-0:   #ffffff;
  --gray-50:  #f4f8f8;
  --gray-100: #e9f0f1;
  --gray-200: #dbe5e7;
  --gray-300: #c3d1d4;
  --gray-400: #93a4a8;
  --gray-500: #647479;
  --gray-600: #47565a;
  --gray-700: #324044;
  --gray-800: #202b2e;
  --gray-900: #121a1c;

  /* ---- Status colors (delikatne, kliniczne) ---- */
  --status-free-bg:      #e4f6ec;   /* open access — zieleń */
  --status-free-fg:      #0f7a43;
  --status-premium-bg:   #e9eafb;   /* premium — indygo */
  --status-premium-fg:   #4f46e5;
  --status-sponsored-bg: #fdf1da;   /* sponsored — bursztyn */
  --status-sponsored-fg: #8a5a00;
  --status-info-bg:      #e3f1f8;   /* info — błękit kliniczny */
  --status-info-fg:      #14636e;
  --status-error-bg:     #fdeceb;   /* error — czerwień kliniczna */
  --status-error-fg:     #c0271c;

  /* ---- Semantic surface tokens (LIGHT — default) ---- */
  --bg-canvas:    var(--gray-50);
  --bg-surface:   var(--gray-0);
  --bg-subtle:    var(--gray-100);
  --bg-inverse:   var(--navy-900);
  --border:       var(--gray-200);
  --border-strong:var(--gray-300);

  --text-strong:  var(--navy-900);
  --text-body:    var(--gray-700);
  --text-muted:   var(--gray-500);
  --text-inverse: var(--gray-0);
  --text-accent:  var(--accent-600);
  --text-brand:   var(--navy-700);

  --brand:        var(--navy-800);
  --brand-hover:  var(--navy-700);
  --accent:       var(--accent-500);
  --accent-hover: var(--accent-600);
  --focus-ring:   var(--accent-400);

  /* ---- Typography (naukowa / techniczna) ---- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.6;
  --leading-relaxed:1.75;   /* article longform */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Radius (lekko mniejsze — bardziej "kliniczne" / techniczne) ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Shadow (tint petrol-teal) ---- */
  --shadow-sm: 0 1px 2px rgba(8, 45, 52, 0.06);
  --shadow-md: 0 4px 14px rgba(8, 45, 52, 0.08);
  --shadow-lg: 0 14px 40px rgba(8, 45, 52, 0.12);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 720px;   /* article reading width */
  --header-h: 68px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* =====================================================================
   DARK MODE
   Toggle via <html data-theme="dark"> (or prefers-color-scheme).
   Only semantic surface tokens are remapped — components stay the same.
   ===================================================================== */
:root[data-theme="dark"] {
  --bg-canvas:    #07171b;
  --bg-surface:   #0b2026;
  --bg-subtle:    #0f2a31;
  --bg-inverse:   #051114;
  --border:       #1c3a42;
  --border-strong:#27505a;

  --text-strong:  #e8f4f5;
  --text-body:    #bcd2d6;
  --text-muted:   #84a0a6;
  --text-inverse: #e8f4f5;
  --text-accent:  var(--accent-300);
  --text-brand:   var(--navy-100);

  --brand:        var(--navy-100);
  --brand-hover:  #ffffff;
  --accent:       var(--accent-400);
  --accent-hover: var(--accent-300);

  --status-free-bg:      #0c3322;
  --status-free-fg:      #6fe0a6;
  --status-premium-bg:   #1f2150;
  --status-premium-fg:   #c4c2fd;
  --status-sponsored-bg: #3a2c12;
  --status-sponsored-fg: #ffd591;
  --status-info-bg:      #0e2f3a;
  --status-info-fg:      #9fd6ea;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:    #07171b;
    --bg-surface:   #0b2026;
    --bg-subtle:    #0f2a31;
    --bg-inverse:   #051114;
    --border:       #1c3a42;
    --border-strong:#27505a;
    --text-strong:  #e8f4f5;
    --text-body:    #bcd2d6;
    --text-muted:   #84a0a6;
    --text-inverse: #e8f4f5;
    --text-accent:  var(--accent-300);
    --text-brand:   var(--navy-100);
    --brand:        var(--navy-100);
    --brand-hover:  #ffffff;
    --accent:       var(--accent-400);
    --accent-hover: var(--accent-300);
    --status-free-bg:      #0c3322;
    --status-free-fg:      #6fe0a6;
    --status-premium-bg:   #1f2150;
    --status-premium-fg:   #c4c2fd;
    --status-sponsored-bg: #3a2c12;
    --status-sponsored-fg: #ffd591;
    --status-info-bg:      #0e2f3a;
    --status-info-fg:      #9fd6ea;
  }
}