/* =========================================================
   PUNKT — Colors & Type
   Vir resnice: PUNKT Smernice 2.0 (2026).
   Družini: Bricolage Grotesque (naslovi) + Plus Jakarta Sans (telo).
   ========================================================= */

/* === Pisave (Google Fonts) ============================================
   Naložene v index.html preko <link rel="stylesheet">.
   Bricolage Grotesque — naslovna; Plus Jakarta Sans — besedilna.
   Drugih družin v projektu NI dovoljenih.
====================================================================== */

:root {
  /* === CGP Punkt 2.0 — točne vrednosti =============================== */
  --punkt-black:        #1A1A1A;   /* osnova tipografije in večine površin */
  --punkt-white:        #FFFFFF;   /* osnova ozadij */
  --punkt-signal-red:   #ED1C24;   /* IZKLJUČNO poudarki: CTA, pike, fokus */
  --punkt-blue:         #2F5DAA;   /* identitetna — večje površine, uravnoteženo */
  --punkt-yellow:       #FFD400;   /* identitetna — večje površine, uravnoteženo */
  --punkt-green:        #2FA36B;   /* sekundarna, tematska — omejeno */
  --punkt-light-gray:   #CFCFCF;   /* podporna hierarhija */

  /* Pomožni tonal: temnejši/svetlejši odtenki za UI (NE smejo biti
     alternativa identitetnim barvam — samo za hairline ločnice, hover,
     subtilna ozadja. Izpeljani iz palete.) */
  --punkt-ink:          #0F0F0F;   /* globlje črna za polna ozadja sekcij */
  --punkt-soft:         #F4F4F4;   /* zelo svetlo ozadje sekcije */
  --punkt-rule:         #ECECEC;   /* svetla ločnica */
  --punkt-rule-dark:    #2A2A2A;   /* temna ločnica (na črni podlagi) */
  --punkt-fg-muted:     #4A4A4A;   /* sekundarno besedilo */
  --punkt-fg-subtle:    #7A7A7A;   /* tretje hierarhično besedilo */

  /* === Semantični tokeni (light surface, default) ==================== */
  --bg:           var(--punkt-white);
  --bg-soft:      var(--punkt-soft);
  --bg-inverse:   var(--punkt-black);

  --fg:           var(--punkt-black);
  --fg-muted:     var(--punkt-fg-muted);
  --fg-subtle:    var(--punkt-fg-subtle);
  --fg-inverse:   var(--punkt-white);

  --border:       var(--punkt-rule);
  --border-strong: var(--punkt-black);

  --accent:       var(--punkt-signal-red);
  --accent-fg:    var(--punkt-white);

  /* === Tipografija =================================================== */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans',   system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Uteži — uporabljamo to, kar Google Fonts ponuja in kar je dejansko
     potrebno za hierarhijo. Bricolage je variable (200–800),
     Jakarta je 200–800. Mi rabimo: */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Lestvica velikosti (fluid). Display je rezerviran za CGP slogovne
     motive (BAZA. FOKUS. ZAGON. ...). H1 za naslove strani. */
  --fs-display:   clamp(56px, 9vw, 144px);
  --fs-h1:        clamp(44px, 6.5vw, 104px);
  --fs-h2:        clamp(32px, 4.2vw, 64px);
  --fs-h3:        clamp(22px, 2.6vw, 36px);
  --fs-h4:        18px;
  --fs-lead:      clamp(18px, 1.6vw, 22px);
  --fs-body:      17px;
  --fs-small:     14px;
  --fs-meta:      12px;
  --fs-micro:     11px;

  --lh-tight:     1.0;
  --lh-snug:      1.12;
  --lh-normal:    1.55;
  --lh-loose:     1.7;

  --tracking-display: -0.025em;
  --tracking-h:       -0.02em;
  --tracking-caps:    0.12em;

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

  /* === Radiji ==========================================================
     Bauhaus / funkcionalistični modernizem = ostri robovi.
     0 po defaultu. Dovoljeni so 2px na inputih in pill na tagih. */
  --radius-0:    0;
  --radius-xs:   2px;
  --radius-pill: 999px;

  /* === Motion =========================================================
     Prizemljen, miren. Kratke ease, brez bouncev. */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-quick:   140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* === Layout ========================================================= */
  --container:   1280px;
  --container-narrow: 880px;
  --safe-zone:   var(--space-5);
}

/* === Dark / negativne površine =====================================
   Apply [data-surface="dark"] na sekcijo (.section--ink) ali nav
   za invertirano paleto. */
[data-surface="dark"] {
  --bg:        var(--punkt-black);
  --bg-soft:   var(--punkt-rule-dark);
  --fg:        var(--punkt-white);
  --fg-muted:  var(--punkt-light-gray);
  --fg-subtle: #9A9A9A;
  --border:    var(--punkt-rule-dark);
  --border-strong: var(--punkt-white);
  background: var(--bg);
  color: var(--fg);
}

/* === Bazna tipografija ============================================= */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-h);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}

h1, .t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
h2, .t-h2 { font-size: var(--fs-h2); }
h3, .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4, .t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p, .t-body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

a { color: inherit; }

/* Signal-red pika na koncu naslovov — CGP signature. */
.dot {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--punkt-signal-red);
  margin-left: 0.16em;
  vertical-align: baseline;
  transform: translateY(-0.04em);
}

/* Eyebrow / meta caps */
.meta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
[data-surface="dark"] .meta,
.section--ink .meta,
.section--blue .meta,
.section--green .meta {
  color: rgba(255, 255, 255, 0.78);
}
.section--yellow .meta {
  color: var(--punkt-black);
}

/* Display motiv — BAZA. FOKUS. ZAGON. */
.t-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
[data-surface="dark"] .t-lead,
.section--ink   .t-lead,
.section--blue  .t-lead,
.section--green .t-lead { color: var(--punkt-light-gray); }

.t-small { font-size: var(--fs-small); line-height: var(--lh-normal); }

/* Placeholder marker — vsebine, ki še manjkajo iz strategije */
.placeholder {
  display: inline-block;
  padding: 2px 6px;
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: rgba(237, 28, 36, 0.10);
  color: var(--punkt-signal-red);
  border: 1px dashed var(--punkt-signal-red);
  border-radius: var(--radius-xs);
  line-height: 1.3;
}
[data-surface="dark"] .placeholder,
.section--ink .placeholder,
.section--blue .placeholder,
.section--green .placeholder {
  background: rgba(255, 255, 255, 0.08);
  color: var(--punkt-white);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Code/mono fallback */
code, kbd, samp {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}