/* ═══════════════════════════════════════════════════════════════════════
   S4U — tokeni.  Preslikano iz Design Guidelines v1.0 §12.
   Vrijednosti su OBAVEZUJUĆE. Nijedna komponenta ne smije imati hardkodiran
   hex — svaka boja dolazi odavde.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* --- neutrali --- */
  --bg:               #ffffff;
  --bg-2:             #fafafa;
  --surface:          #ffffff;
  --surface-2:        #f4f4f4;
  --surface-3:        #ebebeb;
  --surface-4:        #d9d9d9;
  --line:             #d6d6d6;
  --line-soft:        #ebebeb;
  --line-strong:      #9a9a9a;
  --line-strong-hover:#6b6b6b;

  /* --- tekst --- */
  --text:                #1a1a1a;
  --text-muted:          #565656;
  --text-weak:           #8a8a8a;   /* samo placeholder / disabled */
  --text-on-accent:      #ffffff;
  --text-on-light-accent:#1a1a1a;   /* cyan, teal, lime, amber, orange */

  /* --- akcent --- */
  --accent:       #0050ef;
  --accent-press: #0043c9;

  /* --- Metro paleta --- */
  --cobalt:  #0050ef;  --indigo:  #6a00ff;
  --violet:  #aa00ff;  --magenta: #d80073;
  --crimson: #a20025;  --red:     #e51400;
  --orange:  #fa6800;  --amber:   #d68300;
  --lime:    #7ba400;  --emerald: #008a00;
  --teal:    #00aba9;  --cyan:    #1ba1e2;
  --mauve:   #76608a;  --steel:   #647687;

  /* --- moduli --- */
  --mod-dashboard:   var(--cobalt);
  --mod-notes:       var(--indigo);
  --mod-lists:       var(--emerald);
  --mod-bookmarks:   var(--cyan);
  --mod-galleries:   var(--violet);
  --mod-credentials: var(--crimson);
  --mod-settings:    var(--steel);

  /* --- semantika --- */
  --ok:     #008a00;
  --warn:   #d68300;
  --danger: #e51400;
  --info:   #0050ef;

  /* --- tipografija --- */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", ui-monospace, monospace;

  --fs-display:    38px;  --fw-display: 200;  --ls-display: -.02em;
  --fs-display-sm: 26px;
  --fs-title:      18px;
  --fs-section:    13px;  --ls-section: .09em;
  --ls-brand:      .16em;
  --fs-body:       15px;  --lh-body: 1.5;
  --fs-body-sm:    14px;
  --fs-meta:       12px;
  --fs-micro:      11px;
  --fs-input:      16px;  /* nikad manje na mobilnom — iOS Safari zumira */
  --fs-mono:       13.5px;

  /* --- razmaci i mreža --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --grid-gap: 8px;
  --container: 1120px;

  /* --- dimenzije hroma --- */
  --topbar-h:   54px;
  --navbar-h:   62px;
  --rail-w:     72px;
  --rail-w-xl:  240px;
  --tab-ind:    4px;
  --tile-min:   136px;
  --control-h:  44px;
  --btn-h:      40px;
  --btn-h-sm:   32px;
  --btn-h-block:48px;
  --touch-min:  44px;
  --border-w:   2px;
  --spine-w:    4px;

  /* --- oblik i elevacija --- */
  --radius:    0;
  --shadow-1:  0 2px 10px rgba(0,0,0,.14);   /* menu, toast */
  --shadow-2:  0 4px 26px rgba(0,0,0,.20);   /* modal, lightbox */
  --backdrop:  rgba(26,26,26,.55);

  /* --- motion --- */
  --ease:    cubic-bezier(.1,.9,.2,1);
  --dur-1:   100ms;   /* pritisak */
  --dur-2:   140ms;   /* hover, toast */
  --dur-3:   200ms;   /* maksimum u sistemu */
  --press:   scale(.96);
  --lighten: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --press: none; }
}