/* =========================================================
   HELIOS DESIGN SYSTEM — tokens.css
   Drop-in design tokens dla aplikacji Helios (i potencjalnie
   innych modułów Olympus typu „dashboard/aplikacja", nie typu „landing").

   Dziedziczy paletę i część zasad z Olympus Design System
   (olympus.com.pl/design-system/), ale jest dostosowane pod
   aplikację: jasne tło głównego canvasu (nie czarne), inny
   font display (Jost zamiast Cinzel — czytelność w dashboardzie),
   więcej komponentów app'owych (sidebar, status badges, flash, etc.).

   Użycie: dołącz tokens.css i styluj przez var(--*).
   ========================================================= */

:root {
  /* ============================================================
     COLOR · BACKGROUNDS
     Helios ma DWA tryby kontekstu:
       a) DARK (sidebar, login screen, error pages, brand surfaces) → bg-dark*
       b) LIGHT (główny content app — dashboard, formularze, tabele) → bg-light*
     ============================================================ */
  --bg-dark:          #070D19;  /* deep navy — sidebar, login bg, error bg, brand mark surface */
  --bg-dark-elevated: #0F1923;  /* hover na ciemnym tle, modale, dropdown w sidebarze */

  --bg-light:         #FFFFFF;  /* tło kart, formularzy, treści */
  --bg-light-alt:     #F2F2F2;  /* tło głównego canvasu app (poza kartami), header tabel, code blocks */
  --bg-card:          #FFFFFF;  /* alias dla kart — explicit */

  /* ============================================================
     COLOR · BRAND (Helios — słoneczny amber)
     ============================================================ */
  --brand-accent:        #FFB300;  /* primary accent — CTA, focus, active sidebar link, charts */
  --brand-accent-hover:  #FFC233;  /* hover na CTA, gradient secondary stop */
  --brand-accent-dim:    rgba(255, 179, 0, 0.15);  /* tło aktywnego linku sidebar, status badges, hover row */

  /* ============================================================
     COLOR · TEXT
     ============================================================ */
  --text-primary:        #303030;  /* body text na jasnym tle */
  --text-heading:        #1F1F1F;  /* nagłówki H1-H6 na jasnym tle */
  --text-muted:          #80838C;  /* meta, captions, helpers */
  --text-on-dark:        #FFFFFF;  /* tekst na ciemnym tle (sidebar, login) */
  --text-on-dark-muted:  #80838C;  /* meta na ciemnym tle */

  /* ============================================================
     COLOR · STATUS
     ============================================================ */
  --color-success:  #2BE275;  /* alias brand-green */
  --color-warning:  #F0B400;  /* status processing, soon, draft */
  --color-danger:   #E74C3C;  /* status failed, churned, validation error */
  --color-info:     #3498DB;  /* status queued, info messages */

  /* ============================================================
     COLOR · POZYCJE SERP (rank tracker — pos-pill / heatmap)
     ============================================================ */
  --pos-top3-bg:    rgba(43, 226, 117, 0.15);   --pos-top3-text:  #138a4a;  --pos-top3-border:  rgba(43, 226, 117, 0.35);
  --pos-top10-bg:   rgba(255, 179, 0, 0.18);    --pos-top10-text: #a35e00;  --pos-top10-border: rgba(255, 179, 0, 0.45);
  --pos-top30-bg:   rgba(128, 131, 140, 0.12);  --pos-top30-text: #4d5159;  --pos-top30-border: rgba(128, 131, 140, 0.30);
  --pos-top50-bg:   rgba(240, 180, 0, 0.12);    --pos-top50-text: #8a6900;  --pos-top50-border: rgba(240, 180, 0, 0.35);
  --pos-out-bg:     rgba(231, 76, 60, 0.12);    --pos-out-text:   #b8392b;  --pos-out-border:   rgba(231, 76, 60, 0.35);
  --pos-none-text:  #b5b7bd;

  /* ============================================================
     COLOR · BORDERS / DIVIDERS
     ============================================================ */
  --border-default: #E4E6EB;                   /* karty, inputy, divider w jasnym tle */
  --border-subtle:  rgba(255, 255, 255, 0.08); /* divider na ciemnym tle (sidebar) */
  --border-strong:  #303030;                   /* btn-outline-dark border */

  /* ============================================================
     COLOR · SHADOWS / GLOW
     Helios ma cienie KLASYCZNE (czarne, na jasnym tle).
     Olympus landing ma cienie ZIELONE (na czarnym tle).
     ============================================================ */
  --shadow-card:     0 1px 3px rgba(7, 13, 25, 0.05), 0 4px 12px rgba(7, 13, 25, 0.04);
  --shadow-elevated: 0 4px 16px rgba(7, 13, 25, 0.08), 0 12px 32px rgba(7, 13, 25, 0.06);
  --shadow-focus:    0 0 0 3px rgba(43, 226, 117, 0.25);  /* zielony ring na focus */

  /* ============================================================
     TYPOGRAPHY · FAMILIES
     Helios używa Jost (geometryczna sans) zamiast Cinzel (klasyczna serif z Olympus landingu).
     Powód: Cinzel jest piękny w landingach/hero, ale za ozdobny i mniej czytelny w aplikacji
     z gęstym UI (tabele, formularze, długie nagłówki H2/H3). Jost zachowuje „nowoczesny" feel
     i geometryczny charakter pasujący do brand SemTree.
     ============================================================ */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Jost', 'Inter', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============================================================
     TYPOGRAPHY · SCALE
     Skala "app-friendly" (mniejsze niż w landingu Olympus — gęściejsza informacja).
     ============================================================ */
  --text-xs:   11px;  /* badges, sidebar small captions, eyebrows */
  --text-sm:   12px;  /* meta, table captions, hint text */
  --text-base: 14px;  /* body w aplikacji */
  --text-md:   15px;  /* card text */
  --text-lg:   18px;  /* card titles H5 */
  --text-xl:   20px;  /* page title H2 */
  --text-2xl:  24px;  /* stat-value, modal title */
  --text-3xl:  32px;  /* login brand, stat-value highlight */
  --text-4xl:  48px;  /* error page big number (404, 500) */

  /* ============================================================
     TYPOGRAPHY · WEIGHTS / LINE HEIGHT
     ============================================================ */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --leading-tight:   1.1;   /* nagłówki, stat values */
  --leading-snug:    1.3;   /* card titles */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.7;   /* preview content (rendered markdown) */

  /* ============================================================
     SPACING (skala 4px, taka sama jak Olympus)
     ============================================================ */
  --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-24: 96px;

  /* ============================================================
     BORDER RADIUS
     Helios: mniejsze niż Olympus landing (10/14/22 vs 6/10/16/24).
     Powód: aplikacja dashboard-owa → mniej "playful", bardziej "data-dense".
     ============================================================ */
  --radius-sm: 10px;  /* inputy, buttony, status badges, chip-y */
  --radius-md: 14px;  /* karty (helios-card, helios-stat-card) */
  --radius-lg: 22px;  /* login card, error page big container */
  --radius-pill: 999px;  /* status badges (rounded pill style) */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --sidebar-width:    260px;
  --topbar-height:    72px;
  --container-max:    1440px;  /* opcjonalne dla wide screens */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);

  --dur-fast:   150ms;  /* hover, focus, tag pill */
  --dur-base:   250ms;  /* buttony, linki, status changes */
  --dur-slow:   400ms;  /* karty, sidebar slide */

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-base:        1;
  --z-content:     2;
  --z-sidebar:     1030;
  --z-backdrop:    1020;
  --z-sticky:      1010;
  --z-dropdown:    1050;
  --z-modal:       1060;
  --z-toast:       1080;
}

/* ----- Helper: x-cloak (Alpine.js) — wymagany przez UI ----- */
[x-cloak] { display: none !important; }

/* ----- BASE RESET (opcjonalnie, użyj w body) ----- */
.helios-base {
  background: var(--bg-light-alt);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}