/* OSTRA — tokeny. Ciemna scena, jeden akcent (ember), dwa tony światła. */
:root {
  /* tło i powierzchnie */
  --void: #08080B;        /* tło strony, prawie czarny z fioletowym podtonem */
  --surface: #101014;     /* karta, pole formularza */
  --surface-2: #15151B;   /* uniesiona powierzchnia, hover */
  --line: #26262E;        /* linia 1 px */
  --line-soft: #1C1C23;   /* linia pomocnicza */

  /* tekst */
  --ink: #ECE9E4;         /* 16.5:1 na --void, 15.7:1 na --surface */
  --ink-2: #A7A4B0;       /* 8.2:1 na --void, 7.8:1 na --surface */
  --ink-3: #8A8794;       /* 5.6:1 na --void — tylko drobne, nieaktywne opisy */

  /* akcent — zawsze z tekstem --void na wierzchu (6.6:1) */
  --ember: #FF5F3D;
  --ember-deep: #E24A2A;
  --ember-wash: rgba(255, 95, 61, 0.12);

  /* światło pomocnicze — wyłącznie tło/gradienty, nigdy tekst */
  --violet: #3A2A5E;
  --steel: #5C6B7A;

  /* typografia */
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque 96pt ExtraBold",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);
  --step-1: clamp(1.0625rem, 0.99rem + 0.34vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.5rem + 4.6vw, 5.25rem);
  --step-5: clamp(3.25rem, 1.7rem + 7.2vw, 7.5rem);

  /* przestrzeń */
  --pad-x: clamp(1.15rem, 0.7rem + 2.2vw, 3.25rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --r: 3px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 40;
  --z-viewer: 90;
}