/*
 * in7.ba — Design Tokens v2
 * Dark/light mode sistem. Dark je default.
 * Koristiti isključivo ove varijable — nikad hardcoded hex boje.
 *
 * Token groups:
 *   BRAND & STATUS  — boje koje su mode-nezavisne
 *   TYPOGRAPHY      — font porodice i fs-* skala
 *   SPACING         -- space-* skala + layout vars
 *   RADIUS          — border-radius skala
 *   TRANSITIONS     — timing funkcije
 *   Z-INDEX         — slojevitost (sticky < nav < dropdown < overlay < modal < tooltip < toast)
 *   CONTAINERS      — max-width breakpointi
 *   COMPAT ALIASES  — legacy --clr-*, --r-*, --t-* (brisati postepeno)
 *
 *   Sve ostalo (bg, border, text, shadow, gradient) je mode-zavisno
 *   i definisano u :root / [data-theme="dark"] i [data-theme="light"] sekcijama ispod.
 */

/* ─── GLOBALNI (mode-nezavisni) ─────────────────────────────── */
:root {

  /* ── BRAND / ACCENT ──────────────────────────────────────── */
  --color-accent:        #C8913F;
  --color-accent-hover:  #D4A04A;
  --color-accent-light:  rgba(200, 145, 63, 0.12);
  --color-accent-border: rgba(200, 145, 63, 0.30);

  /* ── STATUS COLORS ───────────────────────────────────────── */
  --color-verified: #4CAF7D;
  --color-featured: #C8913F;
  --color-rent:     #60A5FA;
  --color-sale:     #F97316;
  --color-live:     #EF4444;
  --color-success:  #027a48;
  --color-danger:   #b42318;
  --color-warning:  #b54708;
  --color-info:     #3B82F6;

  /* ── TYPOGRAPHY — font porodice ──────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;

  /* ── TYPOGRAPHY — font-size skala ────────────────────────── */
  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  36px;
  --fs-5xl:  clamp(36px, 5vw, 60px);
  --fs-hero: clamp(48px, 7vw, 92px);

  /* ── RADIUS ──────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── SPACING — 4px osnovna jedinica ──────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --navbar-height:     68px;
  --max-w:             1280px;
  --section-padding-y: clamp(64px, 8vw, 120px);
  --card-gap:          24px;
  --card-padding:      24px;

  /* ── CONTAINER WIDTHS ────────────────────────────────────── */
  --container-sm:  600px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-INDEX (sticky < nav < dropdown < overlay < modal < tooltip < toast) */
  --z-base:     1;
  --z-sticky:   90;
  --z-nav:      200;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-tooltip:  600;
  --z-toast:    800;
  --z-top:      9999;

  /* ── COMPAT ALIASES — legacy tokens, brisati postepeno ───── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-2xl:  36px;
  --r-full: 9999px;
  --t-fast: 0.12s ease;
  --t-base: 0.20s ease;
  --t-slow: 0.35s ease;
}

/* ─── DARK MODE (default) ───────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-base:        #09091c;
  --bg-surface:     #0e1222;
  --bg-card:        #131a2c;
  --bg-card-hover:  #1e2940;
  --bg-overlay:     rgba(0, 0, 0, 0.60);
  --bg-input:       #1a2238;
  --bg-navbar:      rgba(9, 9, 28, 0.93);
  --bg-backdrop:    rgba(0, 0, 0, 0.70);

  --border-subtle:  rgba(140, 160, 220, 0.07);
  --border-default: rgba(140, 160, 220, 0.12);
  --border-strong:  rgba(140, 160, 220, 0.20);

  --text-primary:   #f0ede8;
  --text-secondary: #9ea0ae;
  --text-muted:     #706c80;
  --text-on-accent: #09091c;

  --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.65);
  --shadow-navbar:     0 1px 0 rgba(200, 145, 63, 0.08);

  /* Status bg tints — dark mode */
  --color-success-bg:  rgba(2, 122, 72, 0.12);
  --color-danger-bg:   rgba(180, 35, 24, 0.12);
  --color-warning-bg:  rgba(181, 71, 8, 0.12);
  --color-info-bg:     rgba(59, 130, 246, 0.12);

  /* Compat aliases */
  --clr-l-bg:       #09091c;
  --clr-l-bg2:      #0e1222;
  --clr-l-card:     #131a2c;
  --clr-l-card2:    #1e2940;
  --clr-l-border:   rgba(140, 160, 220, 0.07);
  --clr-l-border2:  rgba(200, 145, 63, 0.30);
  --clr-text:       #f0ede8;
  --clr-muted-l:    #9ea0ae;
  --clr-muted-d:    #706c80;
  --clr-faint-l:    #706c80;
  --clr-gold:       #C8913F;
  --clr-gold-light: #D4A04A;
  --clr-gold-dark:  #a87030;
  --clr-gold-bg:    rgba(200, 145, 63, 0.12);
  --clr-gold-border: rgba(200, 145, 63, 0.30);
  --clr-emerald:    #131a2c;
  --clr-emerald2:   #1e2940;
  --clr-emerald3:   #1e2c44;
  --clr-emerald4:   #4CAF7D;
  --clr-success:    #027a48;
  --clr-success-bg: rgba(2, 122, 72, 0.10);
  --clr-danger:     #b42318;
  --clr-danger-bg:  rgba(180, 35, 24, 0.10);
  --clr-warning:    #b54708;
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl:   0 24px 56px rgba(0, 0, 0, 0.65);
  --shadow-gold: 0 8px 28px rgba(200, 145, 63, 0.25);
  --grad-gold:   linear-gradient(135deg, #D4A04A, #C8913F, #a87030);
  --grad-dark:   linear-gradient(135deg, #0e1222 0%, #131a2c 100%);
  --grad-light:  linear-gradient(180deg, #0e1222 0%, #09091c 100%);
}

/* ─── LIGHT MODE ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:        #faf8f4;
  --bg-surface:     #f3f0ea;
  --bg-card:        #ffffff;
  --bg-card-hover:  #fdfbf7;
  --bg-overlay:     rgba(0, 0, 0, 0.35);
  --bg-input:       #ffffff;
  --bg-navbar:      rgba(250, 248, 244, 0.95);
  --bg-backdrop:    rgba(0, 0, 0, 0.50);

  --border-subtle:  rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.18);

  --text-primary:   #111113;
  --text-secondary: #5a5660;
  --text-muted:     #9994a3;
  --text-on-accent: #ffffff;

  --shadow-card:       0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 6px 32px rgba(0, 0, 0, 0.14);
  --shadow-navbar:     0 1px 0 rgba(0, 0, 0, 0.08);

  /* Status bg tints — light mode */
  --color-success-bg:  rgba(2, 122, 72, 0.08);
  --color-danger-bg:   rgba(180, 35, 24, 0.08);
  --color-warning-bg:  rgba(181, 71, 8, 0.08);
  --color-info-bg:     rgba(59, 130, 246, 0.08);

  /* Compat aliases */
  --clr-l-bg:       #faf8f4;
  --clr-l-bg2:      #f3f0ea;
  --clr-l-card:     #ffffff;
  --clr-l-card2:    #fdfbf7;
  --clr-l-border:   rgba(0, 0, 0, 0.06);
  --clr-l-border2:  rgba(200, 145, 63, 0.30);
  --clr-text:       #111113;
  --clr-muted-l:    #5a5660;
  --clr-muted-d:    #9994a3;
  --clr-faint-l:    #9994a3;
  --clr-gold:       #C8913F;
  --clr-gold-light: #D4A04A;
  --clr-gold-dark:  #a87030;
  --clr-gold-bg:    rgba(200, 145, 63, 0.10);
  --clr-gold-border: rgba(200, 145, 63, 0.28);
  --clr-emerald:    #0f2c1a;
  --clr-emerald2:   #1a4a2a;
  --clr-emerald3:   #1e6040;
  --clr-emerald4:   #4CAF7D;
  --clr-success:    #027a48;
  --clr-success-bg: rgba(2, 122, 72, 0.08);
  --clr-danger:     #b42318;
  --clr-danger-bg:  rgba(180, 35, 24, 0.08);
  --clr-warning:    #b54708;
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:   0 24px 56px rgba(0, 0, 0, 0.13);
  --shadow-gold: 0 8px 28px rgba(200, 145, 63, 0.18);
  --grad-gold:   linear-gradient(135deg, #D4A04A, #C8913F, #a87030);
  --grad-dark:   linear-gradient(135deg, #f3f0ea 0%, #faf8f4 100%);
  --grad-light:  linear-gradient(180deg, #faf8f4 0%, #f3f0ea 100%);
}

/* ─── SMOOTH THEME TRANSITION ──────────────────────────────── */
html {
  transition: background-color 300ms ease, color 300ms ease;
}