/* ======================================================================
 * DEFRATAJ — Design Tokens (Phase A)
 * Fluid type, spacing scale, shadows, radii, motion.
 * Kept compatible with existing palette variables in style.css.
 * ====================================================================== */

:root {
  /* Palette extensions (coexist with --primary from style.css) */
  --surface-deep:     #0a3160;
  --surface-ink:      #0f172a;
  --surface-muted:    #475569;
  --surface-bg:       #ffffff;
  --surface-bg-soft:  #f5f8fc;
  --surface-line:     #e2e8f0;
  --accent-amber:     #ffb300;
  --success:          #1a9c5b;
  --danger:           #dc2626;

  /* Fluid typography (mobile -> desktop) */
  --fs-h1:  clamp(1.75rem, 1rem + 2.4vw, 2.6rem);
  --fs-h2:  clamp(1.4rem,  0.95rem + 1.6vw, 2rem);
  --fs-h3:  clamp(1.2rem,  0.95rem + 1vw,   1.5rem);
  --fs-h4:  clamp(1.05rem, 0.9rem + 0.6vw,  1.2rem);
  --fs-lead: clamp(1rem,   0.92rem + 0.4vw, 1.15rem);
  --fs-body: clamp(0.95rem,0.9rem + 0.2vw,  1rem);
  --fs-small: 0.85rem;

  /* Spacing scale (4px baseline) */
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft:  0 2px 6px rgba(10, 49, 96, .06), 0 1px 2px rgba(10, 49, 96, .04);
  --shadow-lift:  0 10px 25px rgba(10, 49, 96, .08), 0 4px 10px rgba(10, 49, 96, .05);
  --shadow-deep:  0 24px 55px rgba(10, 49, 96, .14), 0 10px 20px rgba(10, 49, 96, .08);
  --shadow-ring:  0 0 0 3px rgba(0, 168, 181, .35);

  /* Motion */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-in-out:cubic-bezier(.65, 0, .35, 1);
  --t-fast:     120ms;
  --t-med:      220ms;
  --t-slow:     380ms;

  /* Z-index tiers */
  --z-nav:      1020;
  --z-drawer:   1040;
  --z-toast:    1080;
  --z-modal:    1090;
  --z-fab:      1050;
}

/* ---------- Reduced motion: disable all transitions/animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Fluid typography application ---------- */
h1, .h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.2;  }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3;  }
.lead   { font-size: var(--fs-lead); }
body    { font-size: var(--fs-body); }

/* ---------- Focus-visible: keyboard-only rings ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent, #00A8B5);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  box-shadow: var(--shadow-ring);
  outline: none;
}

/* ---------- Touch targets (>= 44x44 on mobile) ---------- */
@media (max-width: 991.98px) {
  .navbar-defrataj .nav-link,
  .navbar-defrataj .dropdown-item,
  .dropdown-mega .mega-link,
  footer.site-footer a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .btn { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; }
}

/* ---------- Readable line length for prose ---------- */
.prose, article .content, .blog-card .body p, .page-hero .lead-sub {
  max-width: 72ch;
}

/* ---------- Smooth scroll for anchors (respects reduced motion) ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Button press feedback ---------- */
.btn { transition: transform var(--t-fast) var(--ease-out),
                   box-shadow var(--t-fast) var(--ease-out),
                   background-color var(--t-fast) var(--ease-out); }
.btn:active { transform: scale(.97); }

/* ---------- Refined card shadows ---------- */
.card-feature { box-shadow: var(--shadow-soft); }
.card-feature:hover,
a.card-feature:hover { box-shadow: 0 15px 35px rgba(0,0,0,.15) !important; transform: translateY(-5px) !important; border-color: #0066CC !important; background: #f8fbff !important; }
.col-sm-6 a.card-feature:hover .icon { 
  background: #0066CC !important; 
  color: #fff !important; 
  transform: scale(1.1) !important;
}

/* ---------- Utility: visually-hidden but screen-reader reachable ---------- */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}