/* tokens.css — Design system „Dzień z Energią" (Monitor Legislacyjny).
   Jedna prawda tokenowa dla całej aplikacji.
   Kaskaduje przez: base → layout → components → timeline → futuristic.

   Filozofia wizualna: spójny z portalem Fundacji Entegra (dzienzenergia.pl).
     Nowoczesny, świeży, tech-forward. Nie dashboard korporacyjny.
     Teal brand, płynne gradienty, delikatne cienie, zaokrąglone kształty.
     Czytelny, profesjonalny — ale nie sztywny/prawniczy.

   Paleta:
     Teal primary (#0d9488) + deep (#0f766e) + bright (#14b8a6) + glow (#5eead4).
     Mint-tinted backgrounds. Navy text. Teal-alpha overlays.

   Typografia:
     head → General Sans  → nagłówki, nav, buttony, labels
     body → Satoshi       → treść, opisy, sidebar

   Shape: 8-20px border-radius. Rounded, friendly, modern.
   Shadows: teal-tinted soft (rgba(13,148,136,.10-.12)).
   Gradients: linear-gradient(135deg, teal → teal-bright). */

:root {
  /* === Brand teal — THE primary chromatic accent ===
     Used generously: buttons, links, badges, focus rings,
     progress bars, active states. Energetic, confident. */
  --c-teal:        #0d9488;
  --c-teal-bright: #14b8a6;
  --c-teal-deep:   #0f766e;
  --c-teal-glow:   #5eead4;

  /* === Secondary colors === */
  --c-red:        #dc2626;
  --c-red-deep:   #b91c1c;
  --c-red-light:  #ef4444;

  /* === Semantic status colors === */
  --c-sky:    #38bdf8;
  --c-amber:  #d97706;
  --c-green:  #059669;

  /* === Alpha accent (teal-based soft backgrounds) === */
  --a-teal-04: rgba(13,148,136,.04);
  --a-teal-06: rgba(13,148,136,.06);
  --a-teal-08: rgba(13,148,136,.08);
  --a-teal-12: rgba(13,148,136,.12);
  --a-teal-18: rgba(13,148,136,.18);
  --a-teal-25: rgba(13,148,136,.25);

  /* === Indigo accent (command palette badges) === */
  --c-indigo:      #6366f1;
  --c-indigo-deep: #4f46e5;
  --a-indigo-12:   rgba(99,102,241,.12);
  --a-indigo-10:   rgba(99,102,241,.10);

  /* === Brand gradient === */
  --g-brand: linear-gradient(135deg, var(--c-teal), var(--c-teal-bright));

  /* === Semantyka — ETAPY procesu legislacyjnego (1..7) === */
  --c-stage-1: #78716c;           /* wykaz prac RM — warm gray */
  --c-stage-2: #0f766e;           /* RCL — teal */
  --c-stage-3: #1e6f5c;           /* komitet stały RM — muted green */
  --c-stage-4: #4338ca;           /* Rada Ministrów — deep indigo */
  --c-stage-5: #b91c1c;           /* Sejm — red */
  --c-stage-6: #991b1b;           /* Senat — deeper red */
  --c-stage-7: #059669;           /* Dz.U. — green */

  /* === Semantyka — TYP zmiany w redline === */
  --c-modify: var(--c-amber);
  --c-insert: var(--c-green);
  --c-delete: var(--c-red);
  --c-substitute: #7c3aed;
  --c-substitute-tint: rgba(124,58,237,.12);
  --c-unchanged: var(--c-fg-muted);

  /* === Coverage / quality levels === */
  --lvl-good:         var(--c-green);
  --lvl-good-bg:      rgba(5,150,105,.10);
  --lvl-good-soft-bg: rgba(5,150,105,.05);
  --lvl-warn:         var(--c-amber);
  --lvl-warn-bg:      rgba(217,119,6,.10);
  --lvl-warn-soft-bg: rgba(217,119,6,.05);
  --lvl-low:          var(--c-red);
  --lvl-low-bg:       rgba(220,38,38,.10);
  --lvl-low-soft-bg:  rgba(220,38,38,.05);

  /* === Redline operation text colors === */
  --rl-ins-fg: var(--c-green);
  --rl-mod-fg: #b45309;
  --rl-del-fg: var(--c-red-deep);
  --rl-sub-fg: #6d28d9;

  /* === Redline operation background tints === */
  --rl-ins-bg: #d1fae5;
  --rl-mod-bg: #fef3c7;
  --rl-del-bg: #fee2e2;
  --rl-sub-bg: rgba(124,58,237,.12);

  /* LLM augmentation badge */
  --c-llm: #7c3aed;

  /* === Convenience — accent (teal) === */
  --c-accent:      var(--c-teal);
  --c-accent-soft: rgba(13,148,136,.06);

  /* === Convenience — active (enacted/current stage) === */
  --c-active: var(--c-green);

  /* === Convenience — soft bg, rule, navy === */
  --c-soft:  #edf5f1;
  --c-navy:  #0c1829;
  --c-rule:  var(--c-border);

  /* === Backward-compat aliases === */
  --c-slate:        #3d4f5f;
  --c-border-light: rgba(13,148,136,.06);
  --c-teal-light:   rgba(13,148,136,.08);
  --c-ochre:        #d97706;
  --c-ochre-light:  #f59e0b;
  --c-ochre-tint:   rgba(217,119,6,.06);

  /* === Semantyczne kolory — rozporządzenie, diff, akcje === */
  --c-rozp:        #92400e;
  --c-rozp-tint:   rgba(146,64,14,.08);
  --c-orange:      #f97316;
  --c-orange-deep: #ea580c;
  --c-danger:      #e74c3c;
  --c-source-bg:   #718096;
  --c-insert-text: #276749;
  --c-delete-text: #c53030;
  --c-chip-active: #16a34a;

  /* === Badge / type semantic colors (expert types, media types, konsultacje) === */
  --c-green-deep:     #166534;   /* insert ops, commentary, konsultacje pozytywne */
  --c-red-text:       #991b1b;   /* delete ops, konsultacje krytyczne */
  --c-blue-text:      #1e40af;   /* konsultacje uwagi szczegółowe */
  --c-badge-slate:    #4a5568;   /* journalist type */
  --c-badge-slate-bg: #edf2f7;
  --c-badge-amber:    #744210;   /* lawyer type */
  --c-badge-amber-bg: #fef5e7;
  --c-badge-green-bg: #e6ffed;   /* expert type bg */
  --c-badge-blue:     #0c4a6e;   /* analysis type */
  --c-badge-blue-bg:  #e0f2fe;
  --c-badge-mint-bg:  #f0fdf4;   /* commentary type bg */
  --c-warning-bg:     #fef3c7;   /* press badge, rozp about badge */
  --c-navy-accent:    #243b6e;   /* prezydent button hover */

  /* === Stage status aliases === */
  --st-done: var(--c-teal-deep);
  --st-act:  var(--c-teal);
  --st-up:   rgba(13,148,136,.2);

  /* === ACTION COLORS (buttons — teal gradient, rounded) === */
  --c-action-bg:           var(--c-teal);
  --c-action-bg-hover:     var(--c-teal-deep);
  --c-action-fg:           #ffffff;
  --c-action-border:       var(--c-teal-deep);
  --c-action-border-hover: var(--c-teal-deep);
  --sh-action-glow:        0 4px 16px rgba(13,148,136,.25);

  /* Ghost/secondary action */
  --c-action-ghost-bg:           transparent;
  --c-action-ghost-fg:           var(--c-teal-deep);
  --c-action-ghost-border:       var(--a-teal-25);
  --c-action-ghost-bg-hover:     var(--a-teal-06);
  --c-action-ghost-border-hover: var(--c-teal);

  /* === Surface (LIGHT mode — mint-tinted paper) === */
  --c-bg:       #f5faf8;
  --c-bg-mid:   #edf5f1;
  --c-bg-elev:  #ffffff;
  --c-fg:       #0c1829;
  --c-fg-muted: #3d4f5f;
  --c-border:   rgba(13,148,136,.12);
  --c-divider:  rgba(13,148,136,.08);

  --c-nav-bg:   rgba(255,255,255,.92);
  --c-overlay:  rgba(255,255,255,.97);

  /* === Shape — rounded, modern === */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* === Shadow — teal-tinted, soft === */
  --sh-sm:   0 2px 8px rgba(13,148,136,.12);
  --sh-md:   0 8px 24px rgba(13,148,136,.10);
  --sh-lg:   0 16px 40px rgba(13,148,136,.12);
  --sh-ring: 0 0 0 3px rgba(13,148,136,.35);

  /* === Typography ===
     head → General Sans  → headings, nav, buttons, labels
     body → Satoshi       → reading content, descriptions, sidebar
     mono → JetBrains Mono → Dz.U., art., dates */
  --f-display: 'General Sans', system-ui, -apple-system, sans-serif;
  --f-head:    'General Sans', system-ui, -apple-system, sans-serif;
  --f-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --f-serif:   'Satoshi', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Consolas, ui-monospace, monospace;

  /* === Spacing === */
  --px:         clamp(1rem, 5vw, 4rem);
  --section-py: clamp(3rem, 7vw, 4.5rem);
  --nav-h:      56px;

  /* === Motion — fluid, not instant === */
  --t-fast: .2s cubic-bezier(.4,0,.2,1);
  --t-base: .3s cubic-bezier(.4,0,.2,1);
  --t-slow: .45s cubic-bezier(.4,0,.2,1);
}

/* === Dark mode — deep navy ===
   Dwa selektory:
     1. [data-theme="dark"]                      — explicit toggle (JS)
     2. @media(prefers-color-scheme:dark) + :not  — OS fallback / noscript
   theme.js ustawia data-theme="dark" przy OS dark, ale CSS fallback
   chroni przed FOUC zanim JS się załaduje.
   Tokeny zdefiniowane RAZ — @media blok importuje z [data-theme]. */

[data-theme="dark"] {
  --c-bg:       #0c1829;
  --c-bg-mid:   #111f33;
  --c-bg-elev:  #1a3048;
  --c-fg:       #f0fdfa;
  --c-fg-muted: #94a3b8;
  --c-border:   rgba(13,148,136,.18);
  --c-divider:  rgba(13,148,136,.10);
  --c-nav-bg:   rgba(12,24,41,.82);
  --c-overlay:  rgba(12,24,41,.97);
  --c-soft:     #111f33;
  --c-navy:     #f0fdfa;
  --c-rule:     rgba(13,148,136,.18);
  --c-slate:    #94a3b8;
  --c-border-light: rgba(13,148,136,.08);
  --c-teal-light:   rgba(13,148,136,.15);
  --c-accent-soft:  rgba(13,148,136,.08);
  --a-teal-04: rgba(13,148,136,.04);
  --a-teal-06: rgba(13,148,136,.06);
  --a-teal-08: rgba(13,148,136,.10);
  --a-teal-12: rgba(13,148,136,.15);
  --rl-ins-fg: #6ee7b7;
  --rl-mod-fg: #fbbf24;
  --rl-del-fg: #fca5a5;
  --rl-sub-fg: #c4b5fd;
  --rl-ins-bg: #065f46;
  --rl-mod-bg: #92400e;
  --rl-del-bg: #991b1b;
  --rl-sub-bg: rgba(124,58,237,.18);
  /* Indigo — jaśniejsze warianty dla ciemnego tła */
  --c-indigo:      #818cf8;
  --c-indigo-deep: #a5b4fc;

  --c-action-bg:       var(--c-teal);
  --c-action-bg-hover: var(--c-teal-bright);
  --c-action-fg:       #ffffff;

  --c-rozp:        #fbbf24;
  --c-rozp-tint:   rgba(146,64,14,.15);
  --c-orange:      #fb923c;
  --c-orange-deep: #f97316;
  --c-danger:      #f87171;
  --c-source-bg:   #475569;
  --c-insert-text: #6ee7b7;
  --c-delete-text: #fca5a5;
  --c-chip-active: #86efac;

  --c-green-deep:     #86efac;
  --c-red-text:       #fca5a5;
  --c-blue-text:      #93c5fd;
  --c-badge-slate:    #cbd5e1;
  --c-badge-slate-bg: rgba(148,163,184,.12);
  --c-badge-amber:    #fbbf24;
  --c-badge-amber-bg: rgba(245,158,11,.12);
  --c-badge-green-bg: rgba(34,197,94,.12);
  --c-badge-blue:     #93c5fd;
  --c-badge-blue-bg:  rgba(59,130,246,.15);
  --c-badge-mint-bg:  rgba(34,197,94,.12);
  --c-warning-bg:     rgba(245,158,11,.15);
  --c-navy-accent:    #4b6fa5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --c-bg:       #0c1829;
    --c-bg-mid:   #111f33;
    --c-bg-elev:  #1a3048;
    --c-fg:       #f0fdfa;
    --c-fg-muted: #94a3b8;
    --c-border:   rgba(13,148,136,.18);
    --c-divider:  rgba(13,148,136,.10);
    --c-nav-bg:   rgba(12,24,41,.82);
    --c-overlay:  rgba(12,24,41,.97);
    --c-soft:     #111f33;
    --c-navy:     #f0fdfa;
    --c-rule:     rgba(13,148,136,.18);
    --c-slate:    #94a3b8;
    --c-border-light: rgba(13,148,136,.08);
    --c-teal-light:   rgba(13,148,136,.15);
    --c-accent-soft:  rgba(13,148,136,.08);
    --a-teal-04: rgba(13,148,136,.04);
    --a-teal-06: rgba(13,148,136,.06);
    --a-teal-08: rgba(13,148,136,.10);
    --a-teal-12: rgba(13,148,136,.15);
    --rl-ins-fg: #6ee7b7;
    --rl-mod-fg: #fbbf24;
    --rl-del-fg: #fca5a5;
    --rl-sub-fg: #c4b5fd;
    --rl-ins-bg: #065f46;
    --rl-mod-bg: #92400e;
    --rl-del-bg: #991b1b;
    --rl-sub-bg: rgba(124,58,237,.18);
    /* Indigo — jaśniejsze warianty dla ciemnego tła */
    --c-indigo:      #818cf8;
    --c-indigo-deep: #a5b4fc;

    --c-action-bg:       var(--c-teal);
    --c-action-bg-hover: var(--c-teal-bright);
    --c-action-fg:       #ffffff;

    --c-rozp:        #fbbf24;
    --c-rozp-tint:   rgba(146,64,14,.15);
    --c-orange:      #fb923c;
    --c-orange-deep: #f97316;
    --c-danger:      #f87171;
    --c-source-bg:   #475569;
    --c-insert-text: #6ee7b7;
    --c-delete-text: #fca5a5;
    --c-chip-active: #86efac;

    --c-green-deep:     #86efac;
    --c-red-text:       #fca5a5;
    --c-blue-text:      #93c5fd;
    --c-badge-slate:    #cbd5e1;
    --c-badge-slate-bg: rgba(148,163,184,.12);
    --c-badge-amber:    #fbbf24;
    --c-badge-amber-bg: rgba(245,158,11,.12);
    --c-badge-green-bg: rgba(34,197,94,.12);
    --c-badge-blue:     #93c5fd;
    --c-badge-blue-bg:  rgba(59,130,246,.15);
    --c-badge-mint-bg:  rgba(34,197,94,.12);
    --c-warning-bg:     rgba(245,158,11,.15);
    --c-navy-accent:    #4b6fa5;
  }
}