/* =====================================================================
   Design Tokens — Platforma e-wydań (kwartalnik medyczny)
   ---------------------------------------------------------------------
   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).

   Direction: ekspercki / medyczny / premium / redakcyjny.
   - granat (navy)      -> wiarygodność, marka
   - magenta / crimson  -> akcent nawiązujący do obecnego PDF
   - biel / jasne tła   -> czytelność longform
   - neutralne szarości -> struktury, admin
   - delikatne statusy  -> premium / sponsored / free / błędy
   ===================================================================== */

:root {
  /* ---- Brand palette: Navy (primary) ---- */
  --navy-50:  #eef4fb;
  --navy-100: #d6e4f3;
  --navy-200: #aec9e7;
  --navy-300: #7aa3d2;
  --navy-400: #4877b4;
  --navy-500: #2b5793;
  --navy-600: #1d4173;
  --navy-700: #163457;
  --navy-800: #102744;
  --navy-900: #0b1d34;
  --navy-950: #07142540;

  /* ---- Accent palette: Red (znak "RD" z logo Badania Kliniczne) ---- */
  --accent-50:  #fdecea;
  --accent-100: #fbd6d2;
  --accent-200: #f4ada6;
  --accent-300: #ec7d73;
  --accent-400: #e2554a;
  --accent-500: #d62b1e;  /* primary accent — czerwień z logo */
  --accent-600: #b51f15;
  --accent-700: #8f1810;

  /* ---- Brand blue (napis "BADANIA KLINICZNE" z logo) ---- */
  --blue-400: #3a93cf;
  --blue-500: #1f7fc4;
  --blue-600: #176aa8;

  /* ---- Neutral / gray scale ---- */
  --gray-0:   #ffffff;
  --gray-50:  #f7f9fc;
  --gray-100: #eef1f6;
  --gray-200: #e1e6ee;
  --gray-300: #cbd3df;
  --gray-400: #9aa5b6;
  --gray-500: #6b7688;
  --gray-600: #4d5667;
  --gray-700: #374152;
  --gray-800: #232b39;
  --gray-900: #141a24;

  /* ---- Status colors (delikatne) ---- */
  --status-free-bg:      #e6f6ee;
  --status-free-fg:      #11703f;
  --status-premium-bg:   #efe7fb;
  --status-premium-fg:   #6d28d9;
  --status-sponsored-bg: #fff3df;
  --status-sponsored-fg: #8a5a00;
  --status-info-bg:      #e7f0fb;
  --status-info-fg:      #1d4173;
  --status-error-bg:     #fdecec;
  --status-error-fg:     #b3261e;

  /* ---- 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 ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", 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 ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(11, 29, 52, 0.06);
  --shadow-md: 0 4px 14px rgba(11, 29, 52, 0.08);
  --shadow-lg: 0 14px 40px rgba(11, 29, 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:    #0a131f;
  --bg-surface:   #0f1c2e;
  --bg-subtle:    #14233a;
  --bg-inverse:   #060d17;
  --border:       #213450;
  --border-strong:#2c4365;

  --text-strong:  #eaf1fb;
  --text-body:    #c2cede;
  --text-muted:   #8b9bb3;
  --text-inverse: #eaf1fb;
  --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:      #103226;
  --status-free-fg:      #7ee2ad;
  --status-premium-bg:   #2a1d4a;
  --status-premium-fg:   #c4b5fd;
  --status-sponsored-bg: #3a2c12;
  --status-sponsored-fg: #ffd591;
  --status-info-bg:      #142a47;
  --status-info-fg:      #aecbf0;

  --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:    #0a131f;
    --bg-surface:   #0f1c2e;
    --bg-subtle:    #14233a;
    --bg-inverse:   #060d17;
    --border:       #213450;
    --border-strong:#2c4365;
    --text-strong:  #eaf1fb;
    --text-body:    #c2cede;
    --text-muted:   #8b9bb3;
    --text-inverse: #eaf1fb;
    --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:      #103226;
    --status-free-fg:      #7ee2ad;
    --status-premium-bg:   #2a1d4a;
    --status-premium-fg:   #c4b5fd;
    --status-sponsored-bg: #3a2c12;
    --status-sponsored-fg: #ffd591;
    --status-info-bg:      #142a47;
    --status-info-fg:      #aecbf0;
  }
}