/* ═══════════════════════════════════════════════════════════
   VARIABLES.CSS — Nameštaj Crni bor
   Izvor istine za sve design tokene.
   Sve vrednosti dolaze iz MASTER_RULES.md §2.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* === OSNOVA — Tamni tonovi === */
  --color-bg-primary:       #0A0A0F;
  --color-bg-secondary:     #12121A;
  --color-bg-tertiary:      #1A1A25;
  --color-bg-elevated:      #222230;

  /* === DRVO — Topli akcenti === */
  --color-wood-golden:      #C8956C;
  --color-wood-amber:       #B07D4F;
  --color-wood-deep:        #8B5E3C;
  --color-wood-walnut:      #5C3D2E;

  /* === TEKST === */
  --color-text-primary:     #F5F0EB;
  --color-text-secondary:   #A39B93;
  --color-text-tertiary:    #6B6560;
  --color-text-accent:      #D4A574;

  /* === STANJE / STATUS === */
  --color-success:          #4CAF50;
  --color-warning:          #D4A028;
  --color-error:            #CF4444;
  --color-info:             #5B8FBF;

  /* === GRADIJENTI — Nikada flat! === */
  --gradient-hero:          linear-gradient(135deg, #0A0A0F 0%, #1A1520 50%, #12121A 100%);
  --gradient-wood:          linear-gradient(135deg, #C8956C 0%, #8B5E3C 100%);
  --gradient-wood-subtle:   linear-gradient(135deg, rgba(200,149,108,0.15) 0%, rgba(139,94,60,0.05) 100%);
  --gradient-card:          linear-gradient(180deg, #16161E 0%, #12121A 100%);
  --gradient-card-hover:    linear-gradient(180deg, #1E1E2A 0%, #16161E 100%);
  --gradient-surface:       linear-gradient(135deg, #12121A 0%, #0E0E16 100%);
  --gradient-cta:           linear-gradient(135deg, #C8956C 0%, #B07D4F 50%, #8B5E3C 100%);
  --gradient-cta-hover:     linear-gradient(135deg, #D4A574 0%, #C8956C 50%, #B07D4F 100%);
  --gradient-text:          linear-gradient(90deg, #C8956C 0%, #D4A574 50%, #C8956C 100%);
  --gradient-border:        linear-gradient(135deg, rgba(200,149,108,0.3) 0%, rgba(200,149,108,0.05) 100%);
  --gradient-glow:          radial-gradient(ellipse at center, rgba(200,149,108,0.15) 0%, transparent 70%);

  /* === GLASS — Za overlay elemente === */
  --glass-bg:               rgba(18, 18, 26, 0.85);
  --glass-border:           rgba(200, 149, 108, 0.12);
  --glass-blur:             blur(20px);
  --glass-shadow:           0 8px 32px rgba(0, 0, 0, 0.4);

  /* === PRIMARNI FONT — Za naslove === */
  --font-display:           'Playfair Display', 'Georgia', serif;

  /* === SEKUNDARNI FONT — Za body tekst === */
  --font-body:              'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === MONOSPACE — Za tehničke specifikacije === */
  --font-mono:              'JetBrains Mono', 'Fira Code', monospace;

  /* === HEADING SCALE === */
  --text-hero:              clamp(3rem, 5vw + 1rem, 5.5rem);
  --text-h1:                clamp(2.5rem, 4vw + 0.5rem, 4rem);
  --text-h2:                clamp(2rem, 3vw + 0.5rem, 3rem);
  --text-h3:                clamp(1.5rem, 2vw + 0.25rem, 2rem);
  --text-h4:                clamp(1.25rem, 1.5vw + 0.25rem, 1.5rem);

  /* === BODY SCALE === */
  --text-lg:                1.25rem;
  --text-base:              1rem;
  --text-sm:                0.875rem;
  --text-xs:                0.75rem;

  /* === LINE HEIGHT === */
  --leading-tight:          1.2;
  --leading-normal:         1.6;
  --leading-relaxed:        1.8;

  /* === FONT WEIGHT === */
  --weight-light:           300;
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;
  --weight-black:           900;

  /* === LETTER SPACING === */
  --tracking-tight:         -0.02em;
  --tracking-normal:        0;
  --tracking-wide:          0.05em;
  --tracking-wider:         0.1em;

  /* === SPACING — Umnožak od 8px === */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.5rem;
  --space-6:    2rem;
  --space-7:    2.5rem;
  --space-8:    3rem;
  --space-9:    4rem;
  --space-10:   5rem;
  --space-11:   6rem;
  --space-12:   8rem;

  /* === SEKCIJSKI SPACING === */
  --section-padding-y:      clamp(4rem, 8vw, 8rem);
  --section-padding-x:      clamp(1rem, 5vw, 6rem);
  --container-max:          1440px;
  --container-narrow:       960px;
  --container-content:      768px;

  /* === BORDER RADIUS === */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-2xl:     32px;
  --radius-full:    9999px;

  /* === SHADOWS — Layered za dubinu === */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.25),
                    0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.3),
                    0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.4),
                    0 8px 16px rgba(0, 0, 0, 0.25);
  --shadow-glow:    0 0 40px rgba(200, 149, 108, 0.15);
  --shadow-glow-strong: 0 0 60px rgba(200, 149, 108, 0.25);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.3),
                    0 1px 4px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(200, 149, 108, 0.05);

  /* === DURATION === */
  --duration-fast:       150ms;
  --duration-normal:     250ms;
  --duration-smooth:     350ms;
  --duration-slow:       500ms;
  --duration-entrance:   600ms;

  /* === EASING — Apple-style === */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:        cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === TRANSFORM PRESETS === */
  --hover-lift:         translateY(-4px);
  --hover-scale:        scale(1.02);
  --press-scale:        scale(0.98);

  /* === SCROLL ANIMATION === */
  --reveal-distance:    30px;
  --reveal-duration:    600ms;
  --reveal-stagger:     100ms;

  /* === Z-INDEX SCALE === */
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-navbar:           500;
  --z-overlay:          800;
  --z-modal:            900;
  --z-toast:            1000;
}