/* ════════════════════════════════════════════════════════════
   Motyw: Green Terminal (Teal)
   Domyślny motyw strony — ciemne tło z akcentami w kolorze teal/zielonym.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Kolory tła ── */
  --bg:        #090b0f;       /* Główne tło strony */
  --bg-card:   #0f1318;       /* Tło kart (usługi, skills, stats) */
  --bg-card2:  #141920;       /* Tło kart przy hover / tło paska terminala */

  /* ── Obramowania ── */
  --border:    #1e2530;       /* Domyślne obramowanie elementów */
  --border-hl: #2a3444;       /* Podświetlone obramowanie (hover, scrolled nav) */

  /* ── Kolory tekstu ── */
  --text:      #d4dae6;       /* Główny kolor tekstu */
  --text-dim:  #6d7f93;       /* Przygaszony tekst (etykiety, podpisy, stopka) */
  --text-mid:  #8899aa;       /* Średni tekst (opisy, treści sekcji) */

  /* ── Kolory akcentowe ── */
  --accent:    #00d4aa;       /* Główny akcent (teal) — linki, CTA, ikony */
  --accent2:   #3d7fff;       /* Drugi akcent (niebieski) — dekoracje, gradienty */
  --accent-dim:#003d30;       /* Przygaszony akcent — tła tagów, obramowania hero-tag */

  /* ── Kolory akcentowe jako RGB (do rgba()) ── */
  --accent-rgb: 0, 212, 170;
  --accent2-rgb: 61, 127, 255;

  /* ── Kolory specyficzne dla komponentów ── */
  --heading-on-dark: #f0f4fa;       /* Kolor nagłówków (h1, h2, h3) na ciemnym tle */
  --nav-brand-tld-hover: #33e8c0;   /* Kolor ".dev" w logo przy hover */
  --service-icon-fg: #9deede;        /* Kolor ikon w kartach usług */
  --skill-icon-fg: #9deede;          /* Jak usługi — teal w tym motywie */
  --footer-meta-link-hover: #9df5e6; /* Kolor linków w stopce przy hover */
  --about-portrait-bg: #0d1118;      /* Tło za portretem w sekcji "O mnie" */

  /* ── Formularz kontaktowy: alerty (styl zbliżony do Bootstrap) ── */
  --form-status-success-bg: rgba(var(--accent-rgb), 0.14);
  --form-status-success-border: rgba(var(--accent-rgb), 0.38);
  --form-status-success-accent: var(--accent);
  --form-status-success-text: var(--accent);

  --form-status-danger-rgb: 255, 115, 115;
  --form-status-danger-bg: rgba(var(--form-status-danger-rgb), 0.12);
  --form-status-danger-border: rgba(var(--form-status-danger-rgb), 0.4);
  --form-status-danger-accent: rgb(var(--form-status-danger-rgb));
  --form-status-danger-text: oklch(0.86 0.09 25);

  --form-status-neutral-bg: var(--bg-card2);
  --form-status-neutral-border: var(--border-hl);
  --form-status-neutral-accent: var(--accent2);
  --form-status-neutral-text: var(--text-mid);

  /* ── Tła nawigacji i menu (z przezroczystością) ── */
  --nav-bg: rgba(9, 11, 15, 0.92);          /* Tło paska nawigacji */
  --mobile-menu-bg: rgba(9, 11, 15, 0.97);  /* Tło menu mobilnego */

  /* ── Kolory terminala (symulacja składni) ── */
  --t-prompt-color: #00d4aa;   /* Prompt "$ " w terminalu */
  --t-cmd-color: #f0f4fa;      /* Komenda terminala po prompt */
  --t-fn-color: #3d7fff;       /* Nazwy tabel/aliasy */
  --t-string-color: #e5c07b;   /* Stringi w terminalu (żółty) */
  --t-keyword-color: #c678dd;  /* Słowa kluczowe SQL (fioletowy) */
  --t-num-color: #d19a66;      /* Liczby w terminalu (pomarańczowy) */
  --t-dot-1: #ff5f57;          /* Kropka terminala — zamknij (czerwona) */
  --t-dot-2: #febc2e;          /* Kropka terminala — minimalizuj (żółta) */
  --t-dot-3: #28c840;          /* Kropka terminala — maksymalizuj (zielona) */

  /* ── Fonty ── */
  --font-mono: 'JetBrains Mono', monospace;  /* Font główny (body, kod, UI) */
  --font-sans: 'Syne', sans-serif;           /* Font nagłówków i tytułów */

  /* ── Zaokrąglenia ── */
  --radius: 6px;  /* Domyślny border-radius przycisków i kart */

  /* ── Skala typografii (fluid, clamp) ── */
  --fs-body:      clamp(1rem, 0.12vw + 0.96rem, 1.125rem);       /* Tekst główny: 16–18 px */
  --fs-sm:        clamp(0.8125rem, 0.1vw + 0.78rem, 0.875rem);   /* Tekst mały: 13–14 px */
  --fs-xs:        clamp(0.75rem, 0.08vw + 0.72rem, 0.8125rem);   /* Tekst mikro: 12–13 px */
  --fs-nav:       clamp(1.0625rem, 0.45vw + 0.95rem, 1.25rem);   /* Linki nawigacji: 17–20 px */
  --fs-nav-brand: clamp(1.125rem, 0.55vw + 1rem, 1.375rem);      /* Logo w nawigacji: 18–22 px */
  --fs-h1:        clamp(2.125rem, 1.1vw + 1.75rem, 3.0625rem);   /* Nagłówek H1: 34–49 px */
  --fs-h2:        clamp(1.75rem, 0.9vw + 1.35rem, 2.375rem);     /* Nagłówek H2: 28–38 px */
  --fs-lead:      clamp(1.0625rem, 0.2vw + 1rem, 1.1875rem);     /* Tekst lead (hero, intro): 17–19 px */
  --fs-card-title: clamp(1.125rem, 0.35vw + 1.02rem, 1.3125rem); /* Tytuły kart: 18–21 px */
  --fs-ui:        clamp(0.9375rem, 0.15vw + 0.88rem, 1rem);      /* Tekst UI (przyciski, inputy): 15–16 px */
  --fs-hero-tag:  0.8125rem;                                     /* Etykieta w hero: 13 px @ root 16px (nie fluid --fs-sm) */

  /* ── Interlinea ── */
  --lh-body:  1.65;  /* Interlinea tekstu głównego */
  --lh-tight: 1.25;  /* Interlinea nagłówków */

  /* ── Układ ── */
  --nav-h:        clamp(4rem, 2vw + 3.25rem, 4.75rem);     /* Wysokość paska nawigacji */
  --footer-logo-h: clamp(2.5rem, 5vw, 3.25rem);              /* Znaczek w stopce (nad podpisem) */
  --max-w:     1140px;                                        /* Maksymalna szerokość kontenera */

  /* ── Skala z-index ── */
  --z-menu:   90;   /* Menu mobilne (pod nawigacją) */
  --z-nav:    100;  /* Pasek nawigacji (fixed) */
  --z-cursor: 150;  /* Niestandardowy kursor */
  --z-skip:   200;  /* Link "przejdź do treści" */
}