/*
  ARKANIP — Formularz konfiguracyjny: JEDNO miejsce z całą kolorystyką.

  Wartości są kopią palety ze środowiska testowego
  (srodowisko-testowe/środowisko-testowe-demonstracja/theme.css) — formularz
  ma wyglądać jak jego trzeci moduł, nie jak osobny produkt. Zmiana brandingu
  = zmiana wartości poniżej i nic więcej; styles.css nie zna ani jednego
  surowego koloru marki.
*/

/*
  Inter wgrany lokalnie, nie z Google Fonts: klinika może wypełniać formularz
  z dysku, a wygląd ma być identyczny bez względu na sieć. Wersja zmienna
  (jeden plik na wszystkie grubości) w dwóch podzbiorach — `latin-ext` niesie
  polskie znaki (ą, ć, ę, ł, ń, ś, ź, ż), `latin` całą resztę.
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("vendor/inter-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("vendor/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Marka --- */
  --color-primary: #2763c5; /* ARKANIP blue — przyciski, aktywny krok */
  --color-primary-dark: #1b4a94; /* hover / wciśnięty stan */
  --color-accent: #0ea5b7; /* turkus — drugorzędny akcent (statusy) */

  /* --- Tła --- */
  --color-bg: #f4f7fb; /* tło strony */
  --color-surface: #ffffff; /* karty, panele */
  /*
    Wyróżnienia w karcie idą w błękit kropki ARKANIP, nie w szarość:
    wcześniejszy #eef3f9 czytał się jako „szare pole” i rzucał się w oczy
    obok białych pól formularza.
  */
  --color-surface-alt: #eaf1fb;
  --color-border: #d8e3f3;
  --color-border-strong: #c3d0e2;
  --blok-tlo: rgba(39, 99, 197, 0.04); /* tło bloków: tydzień, tabela, karty */
  --blok-krawedz: rgba(39, 99, 197, 0.16);

  /* --- Tekst --- */
  --color-text: #16233b; /* ciemny szaro-granatowy — tekst główny */
  --color-text-muted: #5b6b85;
  --color-text-inverse: #ffffff;

  /* --- Sygnały --- */
  --color-success: #2e9e5b;
  --color-warning: #d08a2c;
  --color-danger: #c0432f;

  /* --- Ramka okna — ten sam rozrzedzony błękit, co w środowisku --- */
  --ramka-okna: rgba(79, 140, 240, 0.34);

  /* --- Ciemny panel kroków (granat ze środowiska, pod gwiazdy) --- */
  --color-ink: #030712;
  --color-ink-soft: #0b1220;
  --color-primary-bright: #4f8cf0; /* błękit czytelny na granacie */

  /*
    --- Liquid glass na granacie (sidebar) ---
    Szkło = półprzezroczyste wypełnienie + krawędź + połysk z insetowych
    cieni. BEZ backdrop-filter: pod spodem animują się gwiazdy, a Chrome
    tnie próbkowanie rozmycia nad animowaną treścią (szwy, smugi) — ta sama
    reguła, co w platformie sprzedażowej przy ekranach iPhone'a.
  */
  --szklo-tlo: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.03)
  );
  --szklo-tlo-cichy: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.02)
  );
  --szklo-krawedz: rgba(255, 255, 255, 0.2);
  --szklo-polysk: inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  --szklo-cien: 0 10px 28px rgba(0, 0, 0, 0.35);

  /* --- Typografia --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  /* --- Kształt i głębia --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16, 35, 66, 0.06), 0 1px 3px rgba(16, 35, 66, 0.04);
  --shadow: 0 4px 16px rgba(16, 35, 66, 0.07), 0 1px 3px rgba(16, 35, 66, 0.05);
  --shadow-lg: 0 18px 48px rgba(16, 35, 66, 0.14);

  /* --- Rytm --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}