/* =============================================================================
   ANIĆ-PROJEKT — BREND TOKENI (izvedeno iz weba)

   ⚠ OVAJ FILE SE NE UREĐUJE U OVOM REPOU.

   Izvor istine je `e:\anic-projekti\mockup\tokens\tokens.css`. Ovdje živi samo
   njegov :root blok i semantički aliasi — bez komponenti prodajne stranice
   (.blend, .band, .reveal, zrnata tekstura), jer sučelje za rad nema hero
   fotografiju ni dramaturgiju skrolanja.

   Kad se u webu promijeni boja, font ili skala: prepiši ovaj file iz izvora
   i ponovno ukloni web komponente. Jedan smjer, nikad obrnuto — inače brend
   tiho ode u dva različita smjera.

   CRM-specifični tokeni (gustoća, statusi, širina sidebara) NISU ovdje.
   Oni žive u `crm.css`, jer web za njih nema pojam.
   ============================================================================= */

:root {
  /* --- 1. Neutralna kičma — blago hladno tintana prema azurnoj ---------------- */
  --ink-900: #0D0F12;
  --ink-800: #16191D;
  --ink-700: #222629;
  --ink-600: #343A40;
  --ink-500: #4A5560;
  --ink-400: #6C767F;
  --ink-300: #A8AEB5;
  --ink-200: #D4D8DC;
  --ink-100: #E8EBEE;
  --ink-050: #F4F6F8;

  /* --- 2. TUBÒ tonalnost — svijetlo + JEDNA azurna ----------------------------
     Sučelje CRM-a nasljeđuje TUBÒ tonalnost, ne Građevinu: radna aplikacija u
     kojoj se sjedi osam sati mora biti svijetla i mirna. Bronca Građevine ostaje
     rezervirana za prodajnu stranicu i pojavljuje se u CRM-u samo kao oznaka
     svijeta na zapisu (tržište, projekt), nikad kao ploha sučelja. */
  --tubo-bg:        #FFFFFF;
  --tubo-tint:      #F0F7FE;
  --tubo-tint-2:    #F8FAFD;
  --tubo-accent:    #0F62C4;
  --tubo-accent-hi: #0B4F9E;
  --tubo-deep:      #0B3A6B;
  --tubo-line:      #DCE7F3;

  /* --- 3. Građevina — samo za oznake svijeta unutar podataka ------------------ */
  --grad-bg:        #0D0F12;
  --grad-surface:   #16191D;
  --grad-surface-2: #222629;
  --grad-paper:     #F5F3EF;
  --grad-accent:    #C2A264;
  --grad-accent-hi: #D4B87E;
  --grad-line:      #2C3136;

  /* --- 4. Tipografija --------------------------------------------------------
     NIKAD Inter / Roboto / Open Sans / Montserrat kao naslovni font.
     Plex Sans nosi i sučelje: ima pravi latin-ext set (č ć đ š ž), uski rez za
     guste tablice i mono par za šifre, serijske brojeve i iznose. */
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.65;
  --ls-display: -0.025em;
  --ls-h2:      -0.015em;
  --ls-eyebrow:  0.12em;

  /* --- 5. Spacing — striktni 8-pt sustav ------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- 6. Radius ------------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* --- 7. Sjene — tonirane bojom iz palete, nikad čista crna ------------------ */
  --shadow-sm: 0 1px 2px rgba(13, 15, 18, 0.06),
               0 2px 6px rgba(13, 15, 18, 0.04);
  --shadow-md: 0 2px 4px rgba(13, 15, 18, 0.06),
               0 12px 28px rgba(13, 15, 18, 0.08);
  --shadow-lg: 0 4px 8px rgba(13, 15, 18, 0.05),
               0 24px 56px rgba(13, 15, 18, 0.10);

  /* --- 8. Motion — feedback, nikad spektakl. Doherty prag: < 400 ms ----------- */
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- 9. Semantički aliasi --------------------------------------------------
     Komponente koriste ISKLJUČIVO ove, nikad direktno --tubo-* / --grad-*. */
  --bg:          var(--tubo-bg);
  --bg-subtle:   var(--tubo-tint);
  --bg-raised:   var(--tubo-bg);
  --bg-inverse:  var(--tubo-deep);
  --fg:          #14181C;
  --fg-muted:    var(--ink-500);
  --fg-inverse:  #FFFFFF;
  --accent:      var(--tubo-accent);
  --accent-hi:   var(--tubo-accent-hi);
  --on-accent:   #FFFFFF;
  --line:        var(--tubo-line);
  --focus:       var(--tubo-accent);
}

/* Uz redefiniciju tokena mora ići i `color: var(--fg)` na samom elementu.
   Bez toga djeca naslijede IZRAČUNATU boju s roditelja — `var(--fg)` se ne
   evaluira ponovno pri nasljeđivanju — pa tamna ploha dobije tamni tekst.
   Nađeno u pregledniku na webu, vrijedi jednako ovdje. */
[data-tone] { color: var(--fg); background-color: var(--bg); }

[data-tone="deep"] {
  --bg:         var(--tubo-deep);
  --bg-subtle:  #0E4478;
  --bg-raised:  #10406E;
  --bg-inverse: #FFFFFF;
  --fg:         #FFFFFF;
  --fg-muted:   #AFC9E4;
  --fg-inverse: var(--tubo-deep);
  --accent:     #7FB4EE;
  --accent-hi:  #A6CCF5;
  --on-accent:  var(--tubo-deep);
  --line:       #1C508A;
  --focus:      #7FB4EE;
}