/* ==========================================================================
   Dasa Solutions - shared theme
   Single source of truth for design tokens, base styles, reusable component
   classes, and the motion system. Linked from every page's <helmet> so tokens
   never drift between pages. Page-specific styles stay inline in each .dc.html.
   ========================================================================== */

:root{
  /* Brand palette */
  --navy-900:#0b1a33; --navy-800:#0f2547; --navy-700:#16335f;
  --brand:#15639e; --brand-600:#125a90; --accent:#1399a1; --accent-300:#5fc6cd;
  --ink:#15273f; --muted:#5d6e84; --line:#e3e9f0;
  --bg:#f6f8fb; --bg-soft:#eef3f8; --white:#fff; --err:#c0392b;

  /* Elevation */
  --shadow-sm:0 2px 8px rgba(15,37,71,0.06);
  --shadow-md:0 14px 34px rgba(15,37,71,0.08);
  --shadow-lg:0 24px 60px rgba(11,26,51,0.14);
  --shadow-brand:0 12px 30px rgba(21,99,158,0.22);

  /* Radius */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;

  /* Type */
  --font-body:'Libre Franklin',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-head:'Source Serif 4',Georgia,serif;

  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:var(--font-head); }
a{ color:inherit; }

/* Consistent, visible focus for keyboard users */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
input:focus, textarea:focus{
  outline:none; border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(21,99,158,0.14);
}
input::placeholder, textarea::placeholder{ color:#9aabbf; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container{ max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px; }
.eyebrow{
  display:inline-block; font-size:0.82rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--brand);
  margin-bottom:14px;
}
.eyebrow-pill{
  display:inline-block; padding:7px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  color:#bcd4ec; font-size:0.78rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; margin-bottom:22px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:1.02rem;
  text-decoration:none; cursor:pointer; border:none;
  padding:15px 28px; border-radius:12px;
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ color:#fff; background:var(--brand); box-shadow:var(--shadow-brand); }
.btn-primary:hover{ background:var(--brand-600); box-shadow:0 16px 38px rgba(21,99,158,0.3); }
.btn-light{ color:var(--navy-900); background:#fff; box-shadow:0 12px 30px rgba(0,0,0,0.22); }
.btn-ghost{ color:#eaf1fa; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2); }
.btn-ghost:hover{ background:rgba(255,255,255,0.12); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s;
}
.card-hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#cfe0ee; }

/* --------------------------------------------------------------------------
   Motion system
   Reveal-on-scroll: site.js adds .reveal-init (hides) then .reveal-in (shows).
   No-JS fallback: elements stay visible because CSS only hides once JS opts in.
   -------------------------------------------------------------------------- */
[data-reveal].reveal-init{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].reveal-in{ opacity:1; transform:none; }
/* Stagger children marked data-stagger */
[data-stagger] > *{ transition-delay:calc(var(--i,0) * 80ms); }

@keyframes dasaGlow{
  0%,100%{ opacity:.75; transform:translate(0,0) scale(1); }
  50%{ opacity:1; transform:translate(-3%,3%) scale(1.06); }
}
@keyframes dasaSpin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   Page transitions between tabs are handled in site.js: a branded full-screen
   loader (Dasa logo + spinning ring) covers the screen while a page loads and
   fades out once content renders. Injected by JS only, so pages render normally
   with JS disabled, and skipped entirely under reduced-motion.
   -------------------------------------------------------------------------- */

/* Animated glow layer for dark hero sections. Add class "glow-host" to a
   position:relative section and drop <span class="glow"></span> inside. */
.glow-host{ position:relative; overflow:hidden; }
.glow{
  position:absolute; top:-20%; right:-10%; width:60%; height:120%;
  background:radial-gradient(closest-side, rgba(19,153,161,0.22), transparent 70%);
  pointer-events:none; animation:dasaGlow 9s ease-in-out infinite;
}

/* Small inline spinner (contact submit) */
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2.4px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:dasaSpin .8s linear infinite; display:inline-block;
}

/* --------------------------------------------------------------------------
   Image protection: photography is presented as CSS backgrounds or role="img"
   tiles. Disable selection, dragging, and long-press callouts on all imagery
   (best-effort deterrent; pairs with the contextmenu/dragstart guards in
   site.js and the hotlink rules in vercel.json).
   -------------------------------------------------------------------------- */
img, [role="img"], [data-tile]{
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none; -webkit-touch-callout:none;
}

/* --------------------------------------------------------------------------
   Reduced motion: disable all decorative animation, reveal everything.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal].reveal-init{ opacity:1 !important; transform:none !important; transition:none !important; }
  .glow, .spinner{ animation:none !important; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
  .btn:hover, .card-hover:hover{ transform:none; }
}