/* ============================================================
   Desetka MED — Custom Styles
   Purpose: CSS custom properties, animations, Tailwind overrides
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  --color-primary:       #0C2340;
  --color-primary-mid:   #1B4F72;
  --color-primary-light: #2E86C1;
  --color-accent:        #0097A7;
  --color-accent-light:  #E0F7FA;
  --color-dark:          #111827;
  --color-gray-700:      #374151;
  --color-gray-400:      #9CA3AF;
  --color-gray-100:      #F3F4F6;
  --color-white:         #FFFFFF;
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Hero geometric background pattern --- */
.hero-pattern {
  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.03) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.03) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,0.03) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.03) 87.5%),
    linear-gradient(30deg, rgba(255,255,255,0.03) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.03) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,0.03) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.03) 87.5%),
    linear-gradient(60deg, rgba(255,255,255,0.04) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.04) 75%),
    linear-gradient(60deg, rgba(255,255,255,0.04) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.04) 75%);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* --- Hero gradient overlay --- */
.hero-gradient {
  background: linear-gradient(135deg, rgba(12,35,64,0.6) 0%, rgba(12,35,64,0) 60%);
}

/* --- Smooth anchor scrolling offset for fixed nav --- */
[id] {
  scroll-margin-top: 5rem;
}

/* --- Focus visible styles --- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Selection color --- */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-primary);
}