/* ============================================================
   GLOBAL.CSS — AppBlend v3
   Mixed light/dark dizajn
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* ============================================================
   VARIJABLE
   ============================================================ */
:root {
    /* Svjetla paleta */
    --ab-white:        #ffffff;
    --ab-bg-soft:      #f7f7f7;
    --ab-bg-gray:      #f0f0f0;
    --ab-border:       #e5e5e5;
    --ab-border-mid:   #cccccc;

    /* Tamna paleta */
    --ab-dark:         #111111;
    --ab-dark-soft:    #1a1a1a;
    --ab-dark-mid:     #242424;
    --ab-dark-border:  rgba(255,255,255,0.08);
    --ab-dark-border2: rgba(255,255,255,0.14);

    /* Tekst */
    --ab-text:         #111111;
    --ab-text-soft:    #444444;
    --ab-text-muted:   #888888;
    --ab-text-light:   #bbbbbb;

    /* Crvena */
    --ab-red:          #d32f2f;
    --ab-red-dark:     #9a0007;
    --ab-red-hover:    #b71c1c;
    --ab-red-light:    #ef5350;
    --ab-red-bg:       rgba(211,47,47,0.07);
    --ab-red-border:   rgba(211,47,47,0.22);

    /* Sjene */
    --shadow-sm:       0 1px 6px rgba(0,0,0,0.06);
    --shadow-md:       0 4px 20px rgba(0,0,0,0.09);
    --shadow-lg:       0 10px 40px rgba(0,0,0,0.13);
    --shadow-red:      0 8px 28px rgba(211,47,47,0.28);

    /* Fontovi */
    --font-display:    'Barlow Condensed', sans-serif;
    --font-body:       'Plus Jakarta Sans', sans-serif;

    /* Layout */
    --container:       1200px;
    --pad-h:           60px;
    --pad-v:           88px;

    /* Radijusi */
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  16px;
    --r-xl:  24px;

    /* Tranzicija */
    --t:     0.22s ease;
    --t-sl:  0.4s ease;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background: var(--ab-white);
    color: var(--ab-text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; transition: color var(--t); }
ul   { list-style: none; }

/* ============================================================
   TIPOGRAFIJA
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.3px;
    color: var(--ab-text);
}

/* Display naslovi na tamnoj pozadini */
.ab-dark h1, .ab-dark h2, .ab-dark h3,
.ab-dark h4, .ab-dark h5, .ab-dark h6 { color: #ffffff; }

h1 { font-size: clamp(38px, 5.5vw, 72px); font-weight: 900; }
h2 { font-size: clamp(30px, 4vw, 52px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }

p {
    font-size: 15px;
    line-height: 1.78;
    color: var(--ab-text-soft);
    font-family: var(--font-body);
}

.ab-dark p { color: rgba(255,255,255,0.6); }

/* ============================================================
   SELECTION + SCROLLBAR
   ============================================================ */
::selection { background: var(--ab-red); color: #fff; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--ab-bg-gray); }
::-webkit-scrollbar-thumb { background: var(--ab-red); border-radius: 2px; }