/**
 * tokens.css — TwoPoint Design Tokens
 * Źródło: ekstrakcja dembrandt z twopoint.pl (2026-03-02)
 *
 * TYLKO zmienne. Zero klas, zero selektorów poza :root i @font-face.
 * Import ten plik wszędzie. Nadpisuj zmienne lokalnie dla wariantów (np. navy).
 */

/* ── FONTS ── */
@font-face {
  font-family: 'Haffer SQ';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/HafferSQ-Light.woff') format('woff');
}

@font-face {
  font-family: 'Haffer SQ';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/HafferSQ-Light.woff') format('woff');
}

@font-face {
  font-family: 'Haffer SQ';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/HafferSQ-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Haffer SQ';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/HafferSQ-Medium.woff') format('woff');
}

/* ── BASE RESET ── */
a {
  text-decoration: none;
  color: inherit;
}

:root {

  /* ─────────────────────────────────────────
     COLORS
  ───────────────────────────────────────── */

  /* Neutrals */
  --color-black:        #000000;
  --color-ink:          #333333;
  --color-muted:        #606060;
  --color-border:       #575757;
  --color-line:         #d9d9d9;
  --color-silver:       #b4b4b4;
  --color-white:        #ffffff;

  /* Accent */
  --color-accent:       #8d7c68;   /* warm tan */

  /* Semantic */
  --color-text-primary:      var(--color-ink);
  --color-text-secondary:    var(--color-muted);
  --color-text-inverse:      var(--color-white);
  --color-bg:                var(--color-white);
  --color-bg-dark:           var(--color-ink);
  --color-interactive:       var(--color-black);    /* outlined btn: border + text */
  --color-interactive-fill:  var(--color-interactive); /* filled btn: tło — domyślnie = interactive */
  --color-interactive-hover: var(--color-accent);
  --color-interactive-text:  var(--color-white);   /* tekst na btn-filled */


  /* ─────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────── */

  --font-display: 'Haffer SQ', sans-serif;
  --font-label:   'Forum', sans-serif;

  /* Skala */
  --text-xs:   0.63rem;   /* 10px */
  --text-sm:   0.88rem;   /* 14px */
  --text-base: 1.00rem;   /* 16px */
  --text-md:   1.26rem;   /* ~20px */
  --text-lg:   1.80rem;   /* ~29px */
  --text-xl:   2.34rem;   /* ~37px */

  /* Wagi */
  --weight-thin:    100;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Line height */
  --leading-tight:  1.00;
  --leading-normal: 1.50;

  /* Letter spacing */
  --tracking-labels: 1.5px;
  --tracking-normal: 0px;


  /* ─────────────────────────────────────────
     SPACING  (baza 8px)
  ───────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  30px;
  --space-10: 40px;
  --space-12: 60px;
  --space-16: 80px;
  --space-20: 100px;


  /* ─────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────── */

  --radius-sm:   5px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-pill: 40px;
  --radius-full: 50%;


  /* ─────────────────────────────────────────
     BORDERS
  ───────────────────────────────────────── */

  --border-thin:   1px solid var(--color-border);
  --border-muted:  1px solid var(--color-line);


  /* ─────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────── */

  --shadow-none: none;


  /* ─────────────────────────────────────────
     BREAKPOINTS  (reference)
     mobile: < 768px | tablet: 768–1024px | desktop: > 1024px
  ───────────────────────────────────────── */
}