/* ============================================================
   Dr. PromptField — Design Tokens v1 "Pole"
   Zasada: zloto = znaczenie · sage = interakcja · elewacja jasnoscia
   Scalony plik tokenow (zastapil styles/variables.css) — F1, design-v1
   ============================================================ */

/* ===== FONTY (self-host, /fonts, §3.2) ===== */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20BF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20BF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* IBM Plex Mono 500/600 — swiadomy wyjatek od zakazu nowych fontow (decyzja Kamila,
   13.07.2026): bez niego panel North Star nie jest zgodny ze wzorem. Uzycie WYLACZNIE
   w panelu NS (.ns-*). Statyczne wagi (nie variable) -> osobny plik na wage i subset. */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20BF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20BF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* --- TLA (ramp zieleniowo-neutralny, OLED-first) --- */
  --bg-0: #0A0E0C;              /* tlo aplikacji */
  --bg-1: #111714;              /* karty, powierzchnie 1. poziomu */
  --bg-2: #171F1B;              /* elementy uniesione: input, avatar-box, hover */
  --bg-3: #1F2823;              /* najwyzsza elewacja: pressed, aktywne pola */

  /* --- TEKST --- */
  --text-primary:   #E9EDEB;    /* nie czysta biel — mniej halacji na OLED */
  --text-secondary: #A3B0AA;
  --text-tertiary:  #76837D;    /* min. rozmiar uzycia: 13px w600 lub 14px w400 */
  --text-disabled:  #4E5954;
  --text-on-accent: #0A0E0C;    /* ciemny tekst na wypelnieniach sage/gold */

  /* --- SAGE — interakcja --- */
  --sage-300: #A7C4B7;
  --sage-400: #7FA090;          /* tytul panelu NS (wzor north-star-panel.html) */
  --sage-500: #6F9A87;          /* primary interactive */
  --sage-600: #5C8271;          /* pressed */
  --sage-tint-12: rgba(111,154,135,.12);
  --sage-tint-24: rgba(111,154,135,.24);

  /* --- GOLD — znaczenie (limit <=10% powierzchni) --- */
  --gold-300: #E2C892;
  --gold-500: #C8A45E;
  --gold-600: #A98747;
  --gold-tint-10: rgba(200,164,94,.10);

  /* --- SEMANTYCZNE --- */
  --danger: #C97B6E;            /* stonowany — ton kliniczny, nie alarmowy */
  --danger-tint: rgba(201,123,110,.12);
  --success: var(--sage-500);

  /* --- KRAWEDZIE / FOCUS / OVERLAY --- */
  --border-subtle: rgba(233,237,235,.08);
  --border-strong: rgba(233,237,235,.16);
  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--sage-500);
  --overlay: rgba(5,8,6,.72);

  /* --- TYPOGRAFIA --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* tylko panel NS */

  --fs-display: 1.75rem;   --lh-display: 1.2;   /* 28px — tytuly ekranow, "Lipiec 2026" */
  --fs-title:   1.375rem;  --lh-title: 1.25;    /* 22px — naglowki sekcji/kart */
  --fs-title-sm:1.125rem;  --lh-title-sm: 1.3;  /* 18px — naglowek czatu */
  --fs-body:    1rem;      --lh-body: 1.5;      /* 16px */
  --fs-caption: .875rem;   --lh-caption: 1.45;  /* 14px */
  --fs-label:   .8125rem;  --lh-label: 1.3;     /* 13px — eyebrow, UPPERCASE */
  --ls-label: .08em;
  --w-display: 560;        /* Fraunces variable */
  --w-medium: 500;
  --w-semibold: 600;

  /* --- SPACING (siatka 4pt) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* --- RADIUS --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  /* --- MOTION --- */
  --t-fast: 150ms; --t-base: 240ms; --t-slow: 360ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.3,1.12,.4,1); /* v1.1: overshoot zmiekczony; uzycie WYLACZNIE wskaznik tabow */

  /* --- ROZMIARY --- */
  --touch-min: 44px;
  --icon-sm: 20px; --icon-md: 24px;
}

/* ============================================================
   LEGACY — properties tylko z variables.css (do stopniowej migracji).
   Kolidujace nazwy (--text-primary/-secondary/--ease-out) celowo
   pominiete: wygrywa wartosc ze spec (stare komponenty wchodza w
   nowa palete). Reszta przeniesiona verbatim, by nie zepsuc UI.
   ============================================================ */
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1a1a1a;

  --accent: #7FA99B;
  --accent-hover: #6D9488;
  --accent-glow: rgba(127, 169, 155, 0.35);
  --accent-subtle: rgba(127, 169, 155, 0.12);

  --gold: #D4C79E;
  --gold-hover: #C4B78D;
  --gold-glow: rgba(212, 199, 158, 0.20);
  --gold-subtle: rgba(212, 199, 158, 0.10);

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px rgba(127, 169, 155, 0.15);

  /* uwaga: referuja nowe --ease-out (spec) — zamierzone */
  --transition-fast: 0.15s var(--ease-out);
  --transition-med: 0.25s var(--ease-out);
  --transition-slow: 0.4s var(--ease-out);
}

/* ===== BAZA ===== */
html { background: var(--bg-0); }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
}

/* Klasy typograficzne */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--w-display); letter-spacing: -0.01em; }
.t-title   { font-family: var(--font-display); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-display); }
.t-title-sm{ font-family: var(--font-display); font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); font-weight: var(--w-display); }
.t-label   { font-family: var(--font-ui); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--ls-label); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.t-num     { font-variant-numeric: tabular-nums; }

/* Tekst tylko dla czytnikow ekranu (wizualnie niesie go grafika, np. logo naglowka) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Ikony (sprite Lucide, §4) */
.icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 1.75; flex-shrink: 0; }
.icon--md { width: var(--icon-md); height: var(--icon-md); }

/* Focus — spojny dla wszystkich interaktywnych.
   input/textarea CELOWO poza ta regula: --focus-ring to podwojny ring (2px bg + 4px sage),
   ktory na polach tekstowych czytal sie jak gruba obwodka. Pola maja wlasny focus:
   ramka sage-500 + delikatny box-shadow 3px sage-tint-12 na WRAPPERZE (:focus-within) —
   patrz .note-editor (layout.css) i .chat-input-wrap (modals.css). */
:where(button, a, [role="button"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Reduced motion — obowiazkowy blok */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ===== ADDENDUM v1.1 — grupa A (§13.2) ===== */
:root {
  color-scheme: dark;               /* natywne kontrolki, klawiatura, scrollbary — ciemne */
  accent-color: var(--sage-500);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
html, body { overscroll-behavior-y: contain; }  /* pull-to-refresh nie przeladuje apki */
* { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
::selection { background: var(--sage-tint-24); color: var(--text-primary); }
h1, h2, h3, .t-display, .t-title, .t-title-sm { text-wrap: balance; }
p, .t-caption { text-wrap: pretty; }