/* Design tokens. Derived from design/references/reference page.png
   (Apartt Villa: amber side panel, charcoal ink, warm white, italic serif + clean sans).
   Every page uses ONLY these values. Add a token here before using a new value. */

:root {
  /* Color: warm neutrals carry the page, amber is the one accent */
  --bg:            #faf8f4;
  --surface:       #ffffff;
  --surface-alt:   #f2eee6;
  --ink:           #1f1e1c;
  --ink-soft:      #2b2926;
  --text:          #26241f;
  --text-muted:    #5e5a52;
  --line:          #e3ddd2;
  --line-strong:   #cfc7b8;

  --accent:        #e2a21c;   /* fills, bars, panels. Not for small text on light bg */
  --accent-strong: #8f6206;   /* accent as text on light bg (AA) */
  --accent-ink:    #1f1e1c;   /* text on accent fills */
  --accent-line:   rgb(31 30 28 / 0.18);

  --green:         #02ed39;   /* consent "Akceptuję"; bright, so text on it is dark (10.5:1) */
  --green-strong:  #00cc31;   /* hover */
  --on-green:      #1f1e1c;

  --on-dark:       #f5f1ea;
  --on-dark-muted: #b8b1a5;
  --on-dark-line:  rgb(245 241 234 / 0.14);
  --scrim:         rgb(20 19 17 / 0.66);

  /* Type: one display face, one body face */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.65vw, 1.7rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.35rem);
  --step-4:  clamp(2.05rem, 1.65rem + 2vw, 3.3rem);
  --step-5:  clamp(2.4rem, 1.9rem + 2.6vw, 4.2rem);

  --leading-body:   1.65;
  --leading-tight:  1.1;
  --tracking-tight: -0.015em;
  --tracking-wide:  0.14em;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* Layout */
  --container:        1200px;
  --container-narrow: 760px;
  --header-h:         72px;
  --panel-w:          clamp(320px, 27vw, 400px);

  /* Shape: architectural, nearly square corners like the reference */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm:     0 1px 2px rgb(31 30 28 / 0.06), 0 4px 14px rgb(31 30 28 / 0.06);
  --shadow-lg:     0 24px 64px rgb(31 30 28 / 0.2);
  --shadow-accent: 0 8px 24px rgb(226 162 28 / 0.28);

  /* Motion: one curve */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
}