/* ============================================================
   OPTIMUS STUDIO — Design Tokens (WordPress-ready)
   Version: 1.0  |  26. jun 2026.
   Usage: @import u functions.php ili direktno u style.css teme
   ============================================================ */

:root {

  /* ─────────────────────────────────────────
     BRAND BOJE — core
  ───────────────────────────────────────── */
  --os-navy:        #172A3A;   /* Primarna tamna — Doors, naslovi         */
  --os-cream:       #E7DCC8;   /* Primarna svetla — Living, pozadine      */
  --os-gold:        #C6A06A;   /* Zlato akcenat — monogrami, hairlines    */
  --os-dusty-blue:  #6B8BA4;   /* LEGACY (v1) — povučeno, ne koristi se    */
  --os-sage:        #5E6C54;   /* v2 Šalfija zelena — Optimus Living akcenat */
  --os-linen:       #EFE8D8;   /* v2 Lan — Optimus Living površina         */
  --os-graphite:    #4A4F57;   /* Body tekst                              */
  --os-paper:       #F7F3EE;   /* Off-white pozadina stranice             */

  /* ─────────────────────────────────────────
     NAVY SKALA
  ───────────────────────────────────────── */
  --navy-900: #0E1A24;
  --navy-800: #122230;
  --navy-700: #172A3A;   /* base */
  --navy-600: #21384B;
  --navy-500: #2D4A60;

  /* ─────────────────────────────────────────
     GOLD SKALA
  ───────────────────────────────────────── */
  --gold-700: #A07E48;
  --gold-600: #B38F58;
  --gold-500: #C6A06A;   /* base */
  --gold-400: #D4B585;
  --gold-300: #E3CDA8;

  /* ─────────────────────────────────────────
     DUSTY BLUE SKALA (Living akcenat)
  ───────────────────────────────────────── */
  --blue-700: #51718A;
  --blue-600: #5E7F99;
  --blue-500: #6B8BA4;   /* base */
  --blue-400: #8DA7BC;
  --blue-300: #B5C5D2;

  /* ─────────────────────────────────────────
     KREM NIJANSE
  ───────────────────────────────────────── */
  --cream-deep: #D8C9AE;
  --cream-base: #E7DCC8;
  --cream-soft: #EFE7D6;

  /* ─────────────────────────────────────────
     SEMANTIČKE POVRŠINE
  ───────────────────────────────────────── */
  --surface-dark:   var(--os-navy);
  --surface-light:  var(--os-cream);
  --surface-page:   var(--os-paper);
  --surface-card:   #FFFFFF;

  /* ─────────────────────────────────────────
     SEMANTIČKI TEKST
  ───────────────────────────────────────── */
  --text-on-dark:        #F2ECDF;
  --text-on-dark-muted:  rgba(242, 236, 223, 0.62);
  --text-on-light:       var(--os-graphite);
  --text-on-light-muted: rgba(74, 79, 87, 0.60);
  --text-accent:         var(--os-gold);

  /* ─────────────────────────────────────────
     LINIJE / HAIRLINES
  ───────────────────────────────────────── */
  --line-gold:       rgba(198, 160, 106, 0.55);
  --line-gold-soft:  rgba(198, 160, 106, 0.30);
  --line-on-dark:    rgba(242, 236, 223, 0.22);
  --line-on-light:   rgba(74, 79, 87, 0.18);

  /* ─────────────────────────────────────────
     FONTOVI
  ───────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Maison Aurelia", Georgia, serif;
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Autography", cursive;

  /* ─────────────────────────────────────────
     TIPOGRAFSKA SKALA
  ───────────────────────────────────────── */
  /* Responsivna skala (Boško 2026-09-01, rev2): fluidni clamp — mali na
     mobilnom, umeren na laptopu, blizu originala na velikom ekranu (iMac).
     Ranije statični rem-ovi su bili ogromni na mobilnom (hero 64px fiksno);
     rev1 je precenio pa je bio sitan na velikom ekranu. min→max: */
  --fs-display-xl: clamp(2.5rem, 2.5vw + 1.4rem, 5rem);      /* 40 → 80px (bilo 88) */
  --fs-display-l:  clamp(1.8rem, 1.6vw + 1.5rem, 3.85rem);   /* ~29 → 62px (bilo 64) — hero */
  --fs-display-m:  clamp(1.5rem, 1vw + 1.15rem, 2.6rem);     /* 24 → 42px (bilo 44) */
  --fs-display-s:  clamp(1.25rem, 0.6vw + 1.05rem, 1.95rem); /* 20 → 31px (bilo 32) */
  --fs-body-l:     1.25rem;   /* 20px */
  --fs-body-m:     0.875rem;  /* 14px */
  --fs-body-s:     0.875rem;  /* 14px */
  --fs-label:      0.6875rem; /* 11px */
  --fs-script-l:   clamp(1.7rem, 1.5vw + 1rem, 2.95rem);   /* 27 → 47px (bilo 48) — slogani */
  --fs-script-m:   clamp(1.4rem, 0.8vw + 1rem, 1.95rem);   /* 22 → 31px (bilo 32) */

  /* ─────────────────────────────────────────
     FONTOVI — WEIGHT
  ───────────────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─────────────────────────────────────────
     LINE HEIGHT
  ───────────────────────────────────────── */
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  /* ─────────────────────────────────────────
     LETTER SPACING
  ───────────────────────────────────────── */
  --ls-wordmark:  0.22em;   /* OPTIMUS — širok serif */
  --ls-subbrand:  0.32em;   /* DOORS / LIVING / STUDIO */
  --ls-label:     0.32em;   /* eyebrow / label */
  --ls-heading:   0.02em;   /* naslovi H1-H3 */
  --ls-body:      0.01em;
  --ls-breadcrumb: 0.16em;  /* allcaps trail, tighter than --ls-label */

  /* ─────────────────────────────────────────
     SPACING (8px baza)
  ───────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ─────────────────────────────────────────
     RADIJUSI (arhitektonski, uzdržani)
  ───────────────────────────────────────── */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────
     SJENE (tople, navy-tinted)
  ───────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(23, 42, 58, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 42, 58, 0.10);
  --shadow-lg: 0 24px 60px rgba(23, 42, 58, 0.16);

  /* ─────────────────────────────────────────
     OVERLAY / SCRIM
  ───────────────────────────────────────── */
  /* Bumped 0.86 -> 0.97 (client feedback 2026-08-10): lightbox backdrop
     read as too see-through; client wants the near-solid navy lux feel.
     Only consumer is .os-lightbox (style.css) -- safe to raise globally. */
  --scrim-navy: rgba(14, 26, 36, 0.97);

  /* Living lightbox backdrop (2026-08-19): duboka žalfija-charcoal umesto navy
     jer smo na Living. Namerno vrlo tamna (ista logika 0.97 kao navy) da
     fotografije ostanu verne -- nije svetlo-zelena da ne oboji enterijere.
     Consumer: body.is-living .os-lightbox (style.css). */
  --scrim-sage: rgba(15, 23, 14, 0.97);

  /* ─────────────────────────────────────────
     ANIMACIJA
  ───────────────────────────────────────── */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  180ms;
  --dur-med:   320ms;
  --dur-slow:  600ms;

  /* ─────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────── */
  --maxw-content: 1200px;
  --maxw-prose:   680px;
  --maxw-wide:    1440px;

}

body {
  --surface: var(--os-paper);
  --on-surface: var(--os-graphite);
  --accent: var(--os-gold);
}

body.is-studio {
  --surface: var(--os-paper);
  --on-surface: var(--os-graphite);
  --accent: var(--os-gold);
}

body.is-doors {
  --surface: var(--os-navy);
  --on-surface: var(--text-on-dark);
  --accent: var(--os-gold);
}

body.is-living {
  --surface: var(--os-linen);
  --on-surface: var(--os-navy);
  --accent: var(--os-sage);
}

.os-section--paper {
  --surface: var(--os-paper);
  --on-surface: var(--os-graphite);
  --accent: var(--os-gold);
}

.os-section--dark {
  --surface: var(--os-navy);
  --on-surface: var(--text-on-dark);
  --accent: var(--os-gold);
}

.os-section--light {
  --surface: var(--os-linen);
  --on-surface: var(--os-navy);
  --accent: var(--os-sage);
}

/* Brend akcenat pobeđuje na --light sekcijama.
   --os-sage je Optimus Living akcenat, ali ga je .os-section--light postavljao
   bezuslovno — pa je na Doors/Studio stranama (npr. CTA dugme na
   /doors/galerija/) ispadala tuđa, Living boja. Living ostaje šalfija.
   Boško 2026-08-15. */
body.is-doors .os-section--light,
body.is-studio .os-section--light {
  --accent: var(--os-gold);
}