/**
 * Dunav Union - Design System Tokens
 * Version: 1.1.0 (2026 Modular Architecture)
 * 
 * Sadržaj:
 * 1. Viewport & Container Spatials
 * 2. Color Primitives & Semantic Palette
 * 3. Fluid Spacing Scale
 * 4. Fluid Typography Scale (Mathematical Clamps)
 * 5. Elevation, Shadows & Atmospheric Glows
 * 6. Radii & Geometry
 * 7. Transitions & Motion Timing
 */

:root {
  /* ========================================================================
     1. Viewport & Container Spatials (Fluid Gutter & Max-Widths)
     ======================================================================== */
  --du-container-wide: 1680px;      /* Za monumentalne 3D scene i vizuelne bine */
  --du-container-max: 1480px;       /* Glavni komforni kontejner za moderan desktop */
  --du-container-content: 1200px;   /* Za uže, fokusirane sekcije i forme */
  --du-container-prose: 72ch;       /* Za čitljivost teksta, dokumente i pravilnike */

  /* Fluidni gutter: 20px na mobilnom do 56px na 2K/4K monitorima */
  --du-gutter: clamp(1.25rem, 0.85rem + 1.8vw, 3.5rem);

  /* Ustaljeni padding / upust od ivica viewporta za full-width sekcije */
  --du-viewport-pad: clamp(1.25rem, 0.85rem + 1.8vw, 4rem);   /* 20px -> 64px */

  /* Namenski komforniji upust za monumentalni Hero od ivica viewporta */
  --du-hero-pad-inline: clamp(1.5rem, 1.0rem + 2.5vw, 5.5rem); /* 24px -> 88px */

  /* Globalne visine za navigaciju i ekrane */
  --du-header-h: 88px;
  --du-header-h-scrolled: 74px;
  --du-hero-min-h: calc(100dvh - var(--du-header-h));

  /* ========================================================================
     2. Color Primitives & Semantic Palette
     ======================================================================== */
  /* Primitivi: Slates (Neutralna baza) */
  --du-color-slate-50:  #F8FAFC;
  --du-color-slate-100: #F1F5F9;
  --du-color-slate-200: #E2E8F0;
  --du-color-slate-300: #CBD5E1;
  --du-color-slate-400: #94A3B8;
  --du-color-slate-500: #64748B;
  --du-color-slate-600: #475569;
  --du-color-slate-700: #334155;
  --du-color-slate-800: #1E293B;
  --du-color-slate-900: #0F172A;
  --du-color-slate-950: #020617;

  /* Primitivi: Cyan (Digitalna akciona boja) */
  --du-color-cyan-50:  #F0FBFC;
  --du-color-cyan-100: #E0F9FD;
  --du-color-cyan-200: #B9F0F8;
  --du-color-cyan-300: #7FE2F1;
  --du-color-cyan-400: #38CEE6;
  --du-color-cyan-500: #00BDD6;     /* Zvanični brend cijan */
  --du-color-cyan-600: #009BB0;
  --du-color-cyan-700: #007C8E;
  --du-color-cyan-800: #066472;
  --du-color-cyan-900: #0A535E;

  /* Primitivi: Gold / Amber (Investiciono zlato DunavGold) */
  --du-color-gold-50:  #FFFBEB;
  --du-color-gold-100: #FEF3C7;
  --du-color-gold-200: #FDE68A;
  --du-color-gold-300: #FCD34D;
  --du-color-gold-400: #FBBF24;
  --du-color-gold-500: #F59E0B;     /* Zvanično zlato */
  --du-color-gold-600: #D97706;
  --du-color-gold-700: #B45309;

  /* Primitivi: Red (Diskretni brend naglasak) */
  --du-color-red-50:   #FEF2F2;
  --du-color-red-100:  #FEE2E2;
  --du-color-red-500:  #EF4444;
  --du-color-red-600:  #E30613;     /* Zvanična crvena iz logotipa */
  --du-color-red-700:  #B91C1C;

  /* Funkcionalni / Semantički Tokeni */
  --du-canvas:           var(--du-color-slate-50);
  --du-surface:          #FFFFFF;
  --du-surface-subtle:   var(--du-color-slate-100);
  --du-surface-raised:   #FFFFFF;
  --du-surface-inverse:  var(--du-color-slate-900);
  
  --du-border:           var(--du-color-slate-200);
  --du-border-subtle:    rgba(226, 232, 240, 0.6);
  --du-border-strong:    var(--du-color-slate-300);
  --du-border-inverse:   rgba(255, 255, 255, 0.12);

  --du-text-primary:     var(--du-color-slate-900);
  --du-text-secondary:   var(--du-color-slate-700);
  --du-text-muted:       var(--du-color-slate-500);
  --du-text-light:       var(--du-color-slate-400);
  --du-text-inverse:     #FFFFFF;

  --du-action-primary:         var(--du-color-cyan-500);
  --du-action-primary-hover:   var(--du-color-cyan-600);
  --du-action-primary-active:  var(--du-color-cyan-700);
  --du-action-primary-bg:      var(--du-color-cyan-100);
  --du-action-primary-glow:    rgba(0, 189, 214, 0.28);

  --du-accent-gold:            var(--du-color-gold-500);
  --du-accent-gold-bg:         var(--du-color-gold-100);
  --du-accent-gold-dark:       var(--du-color-gold-700);

  --du-accent-red:             var(--du-color-red-600);
  --du-accent-red-bg:          var(--du-color-red-100);

  /* ========================================================================
     3. Fluid Spacing Scale (3xs do 4xl)
     ======================================================================== */
  --du-space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.375rem);   /* 4px - 6px */
  --du-space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);    /* 8px - 10px */
  --du-space-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* 12px - 14px */
  --du-space-sm:  clamp(1rem, 0.92rem + 0.35vw, 1.25rem);      /* 16px - 20px */
  --du-space-md:  clamp(1.5rem, 1.35rem + 0.6vw, 2rem);        /* 24px - 32px */
  --du-space-lg:  clamp(2rem, 1.75rem + 1vw, 2.75rem);         /* 32px - 44px */
  --du-space-xl:  clamp(2.75rem, 2.35rem + 1.6vw, 4rem);       /* 44px - 64px */
  --du-space-2xl: clamp(3.75rem, 3.1rem + 2.6vw, 6rem);        /* 60px - 96px */
  --du-space-3xl: clamp(5rem, 4rem + 4vw, 8.5rem);             /* 80px - 136px */
  --du-space-4xl: clamp(6.5rem, 5rem + 6vw, 11rem);            /* 104px - 176px */

  /* Fluidni Section Spacing (Block Padding za vertikalni ritam sekcija) */
  --du-section-pad-compact:   clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem);   /* 40px -> 72px */
  --du-section-pad-default:   clamp(4rem, 2.8rem + 4.5vw, 7.5rem);     /* 64px -> 120px */
  --du-section-pad-expansive: clamp(5.5rem, 3.8rem + 6.5vw, 11rem);    /* 88px -> 176px */

  /* ========================================================================
     4. Fluid Typography Scale (Matematički Clamps za 390px - 2560px)
     ======================================================================== */
  --du-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --du-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Scale Clamps */
  --du-text-display: clamp(2.75rem, 1.65rem + 4.6vw, 5.75rem);  /* 44px -> 92px */
  --du-text-h1:      clamp(2.25rem, 1.55rem + 3.1vw, 4.35rem);  /* 36px -> 70px */
  --du-text-h2:      clamp(1.75rem, 1.35rem + 2.0vw, 3.15rem);  /* 28px -> 50px */
  --du-text-h3:      clamp(1.35rem, 1.15rem + 1.1vw, 2.15rem);  /* 22px -> 34px */
  --du-text-h4:      clamp(1.15rem, 1.05rem + 0.55vw, 1.55rem); /* 18px -> 25px */
  --du-text-h5:      clamp(1.00rem, 0.95rem + 0.25vw, 1.25rem); /* 16px -> 20px */
  --du-text-h6:      clamp(0.875rem, 0.85rem + 0.15vw, 1.05rem);/* 14px -> 17px */

  /* Text Clamps: Kontrolisana promena od 2-3px za body */
  --du-text-lead:    clamp(1.0625rem, 1.00rem + 0.25vw, 1.25rem); /* 17px -> 20px */
  --du-text-body:    clamp(0.9375rem, 0.91rem + 0.12vw, 1.0625rem);/* 15px -> 17px */
  --du-text-sm:      clamp(0.8125rem, 0.80rem + 0.08vw, 0.875rem);  /* 13px -> 14px */
  --du-text-xs:      clamp(0.6875rem, 0.675rem + 0.05vw, 0.75rem);  /* 11px -> 12px */

  /* Line Heights (Zategnuti, savremeni vertikalni ritam) */
  --du-leading-display: 1.04;
  --du-leading-tight:   1.08;
  --du-leading-snug:    1.16;
  --du-leading-title:   1.24;
  --du-leading-normal:  1.62;
  --du-leading-relaxed: 1.72;

  /* Letter Spacings */
  --du-tracking-display: -0.04em;
  --du-tracking-h1:      -0.035em;
  --du-tracking-h2:      -0.025em;
  --du-tracking-h3:      -0.015em;
  --du-tracking-normal:   0em;
  --du-tracking-wide:     0.06em;
  --du-tracking-eyebrow:  0.09em;

  /* ========================================================================
     5. Elevation, Shadows & Atmospheric Glows
     ======================================================================== */
  --du-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
  --du-shadow-card:   0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --du-shadow-raised: 0 10px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --du-shadow-hover:  0 20px 40px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(0, 189, 214, 0.12);

  --du-glow-cyan:     0 0 35px rgba(0, 189, 214, 0.35);
  --du-glow-gold:     0 0 35px rgba(245, 158, 11, 0.30);

  /* ========================================================================
     6. Radii & Geometry
     ======================================================================== */
  --du-radius-xs:   4px;
  --du-radius-sm:   8px;
  --du-radius-md:   14px;
  --du-radius-lg:   20px;
  --du-radius-xl:   28px;
  --du-radius-2xl:  38px;
  --du-radius-pill: 9999px;

  /* ========================================================================
     7. Transitions & Motion Timing
     ======================================================================== */
  --du-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --du-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --du-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --du-dur-fast:    150ms;
  --du-dur-base:    250ms;
  --du-dur-slow:    450ms;
}