/* ==========================================================================
   ARCOGNIS — Dark / Light theme switch
   Load AFTER css/style.css on every page:
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/theme.css">
   The site is DARK by default. Light only applies when <html data-theme="light">.
   ========================================================================== */

:root { color-scheme: dark; }

/* ---------- Toggle button (works in both themes) ---------- */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-hair); color: var(--text-2);
  box-shadow: 5px 5px 12px var(--sh-dark), -4px -4px 10px var(--sh-light);
  cursor: pointer; transition: color 0.25s ease, transform 0.25s ease;
}
.theme-toggle:hover { color: var(--cyan); transform: translateY(-2px); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle .i-sun  { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* smooth colour fade for a moment when switching */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

/* ==========================================================================
   LIGHT THEME (only when data-theme="light")
   ========================================================================== */

html[data-theme="light"] {
  color-scheme: light;

  --bg:        #F5F7FB;
  --surface:   #FFFFFF;
  --surface-2: #EEF2F8;
  --surface-3: #E6EBF3;

  --sh-dark:  rgba(30, 41, 70, 0.12);
  --sh-light: rgba(255, 255, 255, 0.95);

  --cyan:      #06907F;
  --cyan-dim:  #047567;
  --blue:      #3A2A8C;
  --blue-glow: #7B6CF0;
  --arc-grad:  linear-gradient(90deg, #079C88 0%, #3A2A8C 100%);

  --text-1: #0E1526;
  --text-2: #475069;
  --text-3: #7C86A0;

  --border:      rgba(20, 30, 60, 0.08);
  --border-hair: rgba(20, 30, 60, 0.14);

  /* hero network colours (read by js/hero-bg.js) */
  --net-a: 6, 144, 127;
  --net-b: 99, 82, 220;
  --net-line-alpha: 0.30;
}

/* Header */
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.82); }
html[data-theme="light"] .nav-links a.active { color: #FFFFFF; }

/* Background effects */
html[data-theme="light"] .bg-fx::after { background-image: radial-gradient(rgba(20, 30, 60, 0.07) 1px, transparent 1px); }
html[data-theme="light"] .bg-fx .blob-teal   { opacity: 0.16; }
html[data-theme="light"] .bg-fx .blob-indigo { opacity: 0.14; }
html[data-theme="light"] .bg-fx .blob-teal-2 { opacity: 0.10; }
html[data-theme="light"] body::before { opacity: 0.018; }

/* Buttons */
html[data-theme="light"] .btn-primary { color: #FFFFFF; text-shadow: none; box-shadow: 6px 6px 16px rgba(7, 156, 136, 0.22), -4px -4px 12px var(--sh-light); }
html[data-theme="light"] .btn-primary:hover { box-shadow: 0 0 0 1px rgba(7, 156, 136, 0.5), 0 8px 26px rgba(7, 156, 136, 0.32); }

/* Hero network background */
html[data-theme="light"] .hero::before,
html[data-theme="light"] .page-hero::before {
  background:
    radial-gradient(ellipse 60% 50% at 78% 30%, rgba(5, 195, 169, 0.16), transparent 70%),
    radial-gradient(ellipse 55% 55% at 15% 85%, rgba(123, 108, 240, 0.14), transparent 70%);
}
html[data-theme="light"] .hero::after,
html[data-theme="light"] .page-hero::after {
  background:
    linear-gradient(90deg, rgba(245, 247, 251, 0.88) 0%, rgba(245, 247, 251, 0.4) 55%, transparent 100%),
    linear-gradient(180deg, transparent 70%, var(--bg) 100%);
}

/* Services graphics */
html[data-theme="light"] .bento .chip.hi { color: #FFFFFF; }
html[data-theme="light"] .bento .rail,
html[data-theme="light"] .bridge .line,
html[data-theme="light"] .timeline .track { background: rgba(20, 30, 60, 0.10); }
html[data-theme="light"] .bento .wave .base { stroke: rgba(20, 30, 60, 0.10); }
html[data-theme="light"] .bento .code u { color: #5B43D6; }

/* About card glow */
html[data-theme="light"] .values::before { background: radial-gradient(circle, rgba(123, 108, 240, 0.22), transparent 70%); }

/* ---------- Logo: white logo on dark, colour logo on light ---------- */
.logo .logo-on-light { display: none; }
html[data-theme="light"] .logo .logo-on-dark  { display: none; }
html[data-theme="light"] .logo .logo-on-light { display: block; }

/* ---------- Phones: keep the header on one line ---------- */
@media (max-width: 760px) {
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 11px 13px; font-size: 0.68rem; white-space: nowrap; }
  .theme-toggle, .nav-toggle { width: 38px; height: 38px; }
  .theme-toggle svg { width: 17px; height: 17px; }
}