/* Physical AI Belgrade — design tokens v1.0 (07.10.2026)
   Fontovi (OFL) su hostovani lokalno: assets/css/fonts.css + assets/fonts/ (bez zahteva ka Google-u). */
:root {
  /* color: core */
  --pab-yellow: #E0A82E;        /* filmska žuta: hero, trake, CTA površine */
  --pab-yellow-light: #EDC56A;  /* hover na žutom, ilustracije */
  --pab-yellow-dark: #B9861C;   /* pritisnut taster, tanke linije na žutoj */
  --pab-black: #16140F;         /* tekst, znak, tamne sekcije */
  --pab-black-2: #24211A;       /* kartice i paneli na crnoj */
  --pab-black-3: #3A352B;       /* ivice na crnoj */
  --pab-red: #B8321F;           /* „//“ i sitni naglasci na žutoj */
  --pab-red-light: #E8523A;     /* „//“ i naglasci na crnoj */
  --pab-paper: #F5EFE3;         /* duži tekst (članci, program) umesto žute */
  --pab-paper-2: #EAE1CF;       /* ivice i pozadine kartica na papiru */
  --pab-muted: #6B6252;         /* sekundarni tekst na papiru */
  --pab-muted-dark: #A39A88;    /* sekundarni tekst na crnoj */

  /* color: semantic */
  --bg: var(--pab-paper);
  --fg: var(--pab-black);
  --accent: var(--pab-red);
  --surface-hero: var(--pab-yellow);
  --surface-dark: var(--pab-black);

  /* type */
  --font-display: "Unbounded", system-ui, sans-serif;     /* 700 */
  --font-body: "Inter", system-ui, sans-serif;            /* 400, 500, 700 */
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* 500 */
  --fs-display: clamp(2.5rem, 6vw, 4.5rem); /* 40–72 px */
  --fs-h1: clamp(2rem, 4vw, 3rem);          /* 32–48 */
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);     /* 24–36 */
  --fs-h3: 1.375rem;                        /* 22 */
  --fs-body: 1.0625rem;                     /* 17 */
  --fs-small: 0.875rem;                     /* 14 */
  --fs-label: 0.8125rem;                    /* 13, mono, uppercase */
  --lh-tight: 1.08; --lh-heading: 1.2; --lh-body: 1.6;
  --ls-display: -0.01em; --ls-label: 0.08em;

  /* space (4 px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* shape: industrijski, mali radijusi */
  --radius-s: 2px; --radius-m: 6px; --radius-l: 10px; --radius-pill: 999px;
  --border: 2px solid var(--pab-black);
  --shadow-hard: 4px 4px 0 var(--pab-black); /* „mašinska“ senka bez blura, za kartice i tastere */

  /* layout */
  --container: 1200px; --gutter: 16px;
  --bp-sm: 640px; --bp-md: 960px; --bp-lg: 1280px;

  /* material (pozadine iz make_material.py) */
  --tex-yellow: url("../img/ploca-1.jpg");

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1); --dur: 160ms;
}

/* helpers */
.pab-surface-yellow { background: var(--pab-yellow) var(--tex-yellow) center / cover; color: var(--pab-black); }
.pab-checker { position: relative; }
.pab-checker::before { content: ""; position: absolute; right: 0; bottom: 0; width: clamp(32px, 7%, 96px); aspect-ratio: 1;
  background: conic-gradient(var(--pab-black) 0 25%, transparent 0 50%, var(--pab-black) 0 75%, transparent 0); }
.pab-label { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.pab-label::before { content: "// "; color: var(--accent); }