/**
 * Villenoir — style guide / design tokens
 *
 * Namena: CSS varijable, tipografska skala, boje, zajednički utility
 * koje ručno održavaš. Učitava se pre custom-theme.css.
 */

:root {
  /* Type scale (1rem = 16px kada je html 16px) */
  --font-size-base: 16px;
  --font-size-h1: 3rem;
  /* 40px */
  --font-size-h2: 2rem;
  /* 32px */
  --font-size-h3: 1.625rem;
  /* 26px */
  --font-size-h4: 1.25rem;
  /* 20px */
  --font-size-h5: 1.125rem;
  /* 18px */
  --font-size-h6: 1rem;
  /* 16px */
  --line-height-body: 1.5;
  --line-height-heading: 1.2;
  --space-heading-after: 0.5em;
  --space-paragraph-after: 1em;
  --space-list-indent: 1.25em;

  /* Backgrounds */
  --color-bg-primary: #000000;

  /* Brand / surfaces */
  --color-surface-brand: #f1dbc7;

  /* Text colors */
  --color-text-primary: #f9f0e8;
  --color-text-on-brand: #826455;

  /* Flex column gaps (utility klase) */
  --gap-8: 8px;
  --gap-16: 16px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-48: 48px;
  --gap-64: 64px;
  --gap-128: 128px;
}

/* Border-box svuda */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Ukloni podrazumevane margine */
*,
*::before,
*::after {
  margin: 0;
}

html {
  font-size: var(--font-size-base);
}

body {
  font-size: 1rem;
  line-height: var(--line-height-body);
}

/* Potomci body-ja sem naslova nasleđuju font-size (ne dira html, da ostane --font-size-base) */
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: inherit;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* Naslovi — eksplicitne veličine, ne nasleđuju body kao glavnu skalu */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-heading);
  font-weight: 600;
  margin-block-end: var(--space-heading-after);
}

h1 {
  font-size: var(--font-size-h1);
  margin: 0;
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
  font-weight: 600;
}

/* Paragraf */
p {
  margin-block-end: var(--space-paragraph-after);
}

p:last-child {
  margin-block-end: 0;
}

/* Liste */
ul,
ol {
  padding-inline-start: var(--space-list-indent);
  margin-block: 0.5em 1em;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-block: 0.25em 0.5em;
}

li {
  margin-block: 0.25em;
}

li::marker {
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------------
   Layout utilities — flex kolona + gap
   Primer: <div class="gap-24 align-center">...</div>
------------------------------------------------------------------ */

.gap-8,
.gap-16,
.gap-24,
.gap-32,
.gap-48,
.gap-64,
.gap-128 {
  display: flex;
  flex-direction: column;
}

.gap-8 {
  gap: var(--gap-8);
}

.gap-16 {
  gap: var(--gap-16);
}

.gap-24 {
  gap: var(--gap-24);
}

.gap-32 {
  gap: var(--gap-32);
}

.gap-48 {
  gap: var(--gap-48);
}

.gap-64 {
  gap: var(--gap-64);
}

.gap-128 {
  gap: var(--gap-128);
}

/* Kombo: centriranje (koristi uz gap-*) */
.align-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

section {
  position: relative;
}

@media screen and (max-width: 991px) {
  :root {
    --gap-128: 64px;
    --gap-64: 32px;
    --gap-48: 32px;
    --gap-32: 24px;
  }
}