/* ========================
   Theme variables
======================== */
/* Global layout resilience */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }

:root{
  color-scheme: light;
  /* Neutrals (light mode) */
  --bg-0: #f2f4f7;           /* page background */
  --bg-1: #ffffff;           /* cards/surfaces */
  --bg-2: #f2f4fa;           /* subtle sections */
  --line: #e5e9f2;           /* borders/separators */

  --text-0: #0b1020;         /* primary text */
  --text-1: #2a3352;         /* secondary text */
  --text-2: #5b6a8c;         /* muted */

  /* Brand – electric violet */
  --brand-400: #7b66ff;
  --brand-500: #6a54ff;
  --brand-600: #5b45f1;
  --brand-700: #4a37d5;

  /* Utility accents (neon-ish) */
  --acc-cyan:    #22d3ee;
  --acc-emerald: #10b981;
  --acc-pink:    #ec4899;
  --acc-indigo:  #8b5cf6;

  /* Buttons (light) */
  --btn-fg: #ffffff;
  --btn-bg: var(--brand-600);
  --btn-bg-hover: #6e5bff;
  --btn-bg-active: #5b45f1;
  --btn-ghost-fg: var(--brand-600);
  --btn-ghost-hover: rgba(91,69,241,0.10);

  /* Cards (light) */
  --card-bg: #ffffff;
  --card-ring: rgba(18,16,46,0.06);
  --card-shadow: 0 10px 30px rgba(18,16,46,0.08);

  /* --- Aliases for components (light) --- */
  --surface: var(--bg-0);
  --border: var(--line);
  --text: var(--text-0);
  --secondary-bg: var(--bg-1);
  --secondary-text: var(--text-0);
  --secondary-hover: #eef2ff;

  /* Primary & danger alias tokens (light) */
  --primary: var(--brand-600);
  --primary-hover: var(--btn-bg-hover);
  --primary-active: var(--btn-bg-active);
  --danger: #ef4444;
  --danger-hover: #dc2626;

  /* Ghost states (light) */
  --btn-ghost-active: rgba(91,69,241,0.18);

  --shadow-sm: 0 4px 8px rgba(0,0,0,.12);
  --shadow-md: 0 8px 18px rgba(0,0,0,.18);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.25);

  --bg-image: url('/assets/images/Light-BG-main.png');  /* light mode */
  --bg-vignette: radial-gradient(135% 170% at 50% 10%,
                 rgba(255,255,255,0) 0%,
                 rgba(255,255,255,0) 55%,
                 rgba(0,0,0,0.16) 100%);
  --bg-noise: none; /* optional: replace with data-URI if you want subtle grain */
}

/* Dark theme (variables override :root) */
html.theme-dark, :root.theme-dark {
  --bg-0: #111b3d;
  --bg-1: #121831;
  --bg-2: #11172d;
  --line: #26304b;

  --text-0: #e8ecf8;
  --text-1: #c8d1ea;
  --text-2: #92a0c6;

  --brand-400: #7b87ff;
  --brand-500: #7a6dff;
  --brand-600: #6a54ff;
  --brand-700: #5944e1;

  --btn-fg: #ffffff;
  --btn-bg: var(--brand-600);
  --btn-bg-hover: #7a6dff;
  --btn-bg-active: #5b45f1;
  --btn-ghost-fg: #cdd6ff;
  --btn-ghost-hover: rgba(122,109,255,0.15);

  --card-bg: #161d36;
  --card-ring: rgba(122,109,255,0.16);
  --card-shadow: 0 18px 45px rgba(6,9,22,0.55);

  --surface: var(--bg-0);
  --border: var(--line);
  --text: var(--text-0);
  --secondary-bg: var(--bg-1);
  --secondary-text: var(--text-0);
  --secondary-hover: #1f243d;

  --primary: var(--brand-600);
  --primary-hover: var(--btn-bg-hover);
  --primary-active: var(--btn-bg-active);
  --danger: #f87171;
  --danger-hover: #ef4444;

  --btn-ghost-active: rgba(122,109,255,0.24);

  --bg-image: url('/assets/images/Dark-BG-main.png');   /* dark mode */
  --bg-vignette: radial-gradient(135% 170% at 50% 10%,
                 rgba(0,0,0,0) 0%,
                 rgba(0,0,0,0) 50%,
                 rgba(0,0,0,0.28) 100%);
}

html.theme-dark { color-scheme: dark; }

/* Ensure page chrome flips with dark theme even if other rules load later */
html.theme-dark,
html.theme-dark body,
html.theme-dark .site-bg {
  background-color: var(--surface);
  color: var(--text);
}
/* ========================
   Base
======================== */
html { background: var(--surface); }
body, .site-bg {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;

  /* 1) base color from tokens  2) vignette overlay  3) actual image */
  background-color: var(--surface);
  background-image: var(--bg-vignette), var(--bg-image);
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;

  /* crop gracefully on any aspect ratio */
  /* (leave attachment 'scroll' for better mobile perf) */
  color: var(--text);
  line-height: 1.6;
}

/* Tasteful parallax for larger screens only */
@media (min-width: 1024px) {
  body,
  .site-bg {
    background-attachment: scroll, fixed; /* vignette scrolls; image fixed */
  }
}

p {
  font-size: 19px;
  line-height: 1.7;
}

/* Global link styles (non-button, non-tile) */
a {
  color: var(--brand-600);
  text-decoration: none;
  transition: color .2s ease, text-decoration-color .2s ease;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

/* ========================
   Containers
======================== */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ========================
   Header
======================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
}
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
}
.brand-logo { height: 36px; width: auto; display: block; border-radius: 6px; }

.nav { display: flex; gap: 24px; }
.nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav a:hover { text-decoration: underline; }

/* ========================
   Hero
======================== */
/* was: padding-top: 32px; text-align:center; justify-content:center; */
.hero{
  padding-top: 32px;
  text-align: center;       /* keep text centered */
}

.hero--gradient{
  /* NEW: flex centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* give the card a consistent height and keep some breathing room */
  min-height: clamp(240px, 36vh, 420px);
  padding: clamp(32px, 5vw, 56px);

  position: relative;
  border-radius: 28px;
  overflow: hidden;

  /* gradient background + subtle inner ring to create the "box" */
  background:
    radial-gradient(120% 140% at 50% 0%,
      rgba(106,84,255,0.22) 0%,
      rgba(106,84,255,0.18) 25%,
      rgba(34,211,238,0.08) 55%,
      transparent 70%),
    linear-gradient(180deg,
      var(--bg-0) 0%,
      var(--bg-1) 40%,
      var(--bg-0) 100%);

  box-shadow: inset 0 0 0 1px rgba(123,135,255,0.10);
}

.tagline {
  font-size: 1.25rem;     /* slightly smaller than h1 */
  font-weight: 500;       /* medium emphasis */
  color: var(--text-1);   /* secondary text color */
  margin-top: 8px;
  margin-bottom: 16px;
  font-style: italic;     /* optional, gives it "motto" feel */
}

/* dark-mode variant unchanged except for the same flex + sizing */
.theme-dark .hero--gradient{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: clamp(240px, 36vh, 420px);
  padding: clamp(32px, 5vw, 56px);

  background:
    radial-gradient(120% 140% at 50% -10%,
      rgba(106,84,255,0.35) 0%,
      rgba(139,92,246,0.18) 35%,
      rgba(34,211,238,0.10) 60%,
      transparent 75%),
    linear-gradient(180deg,#0b1020 0%, #0f1530 45%, #0b1020 100%);
  box-shadow: inset 0 0 0 1px rgba(123,135,255,0.18);
}

/* ========================
   Tiles
======================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* baseline spacing for all tile grids */
  margin-top: 40px;
}

/* Featured Projects: use a dedicated modifier so we can control spacing/layout precisely */
.tiles--featured {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 64px;   /* wider horizontal gap */
  row-gap: 40px;      /* taller vertical gap */
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles--featured { grid-template-columns: 1fr; column-gap: 32px; row-gap: 36px; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr; }
  .tiles--featured { grid-template-columns: 1fr; column-gap: 24px; row-gap: 28px; }
}

.tile {
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  color: var(--secondary-text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.tile:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-md); }
.theme-dark .tile:hover { box-shadow: var(--shadow-lg); }

.tile-accent { height: 4px; border-radius: 2px; background: var(--primary); margin-bottom: 12px; }
.tile-accent-emerald { background: #10b981; }
.tile-accent-indigo  { background: #6366f1; }
.tile-accent-cyan { background: var(--acc-cyan); }

/* ========================
   Buttons
======================== */
.btn {
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}
/* Buttons should never inherit the global link underline */
.btn,
.btn:hover,
.btn:focus {
  text-decoration: none !important;
}

/* Primary (base) */
.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
  transform: translateY(0); /* baseline for hover lift */
}

/* Primary (hover): brighter, no underline, subtle lift */
.btn--primary:hover {
  background: var(--primary-hover);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent);
  transform: translateY(-2px);
}

/* Primary (active/pressed): reduce lift, deepen color */
.btn--primary:active {
  background: var(--primary-active);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
  transform: translateY(0);
}

/* Dark-mode: stronger contrast + same lift model */
.theme-dark .btn--primary {
  background: #7a6dff;
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, #7a6dff 40%, transparent);
}
.theme-dark .btn--primary:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--btn-bg-hover) 50%, transparent);
  transform: translateY(-2px);
}
.theme-dark .btn--primary:active {
  background: #5b45f1;
  box-shadow: 0 2px 8px color-mix(in srgb, #5b45f1 40%, transparent);
  transform: translateY(0);
}

.btn--secondary { background: var(--secondary-bg); color: var(--secondary-text); border: 1px solid var(--border); }
.btn--secondary:hover { background: var(--secondary-hover); }
.btn--secondary:active { background: var(--border); }

.btn--ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn--ghost:hover { background: var(--btn-ghost-hover); }
.btn--ghost:active { background: var(--btn-ghost-active); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-danger:active { background: #991b1b; }

.btn-block { display: block; width: 100%; }

/* ========================
   Footer
======================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 16px 0;          /* thinner row */
  margin-top: 24px;
  font-size: 16px;         /* unified text size */
  line-height: 1.4;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;         /* match footer text */
}

.footer-inner a {
  margin-left: 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 16px;         /* unify with footer text */
}

.footer-inner a:hover {
  text-decoration: underline;
}

/* copyright text aligned with footer links */
.footer-inner .copyright {
  font-size: 16px;
  margin: 0;
}

/* ========================
   A11Y & polish
======================== */
/* Skip-link (accessibility): hidden off-screen until keyboard focus */
.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  z-index: 1000;
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
:where(a, button, .btn):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.link-strong { color: var(--primary); font-weight: 600; text-decoration: none; }
.link-strong:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================
   Dark mode-only link & CTA tweaks
========================= */
.theme-dark a {
  color: var(--text-2);
  text-decoration-color: color-mix(in srgb, var(--text-2), transparent 60%);
}
.theme-dark a:hover,
.theme-dark a:focus-visible {
  color: var(--brand-600);
  text-decoration-color: var(--brand-600);
}
.theme-dark a.link-strong {
  color: var(--brand-400);
  text-decoration-color: color-mix(in srgb, var(--brand-400), transparent 60%);
  font-weight: 600;
}
.theme-dark a.link-strong:hover,
.theme-dark a.link-strong:focus-visible {
  color: var(--brand-500);
  text-decoration-color: var(--brand-500);
}
.theme-dark .nav a {
  color: var(--text-0);
  text-decoration-color: color-mix(in srgb, var(--text-0) 50%, transparent);
}
.theme-dark .nav a:hover,
.theme-dark .nav a:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
}
.theme-dark .btn--secondary {
  background: transparent;
  color: var(--btn-ghost-fg);
  border-color: color-mix(in srgb, var(--brand-600), transparent 20%);
}
.theme-dark .btn--secondary:hover,
.theme-dark .btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--bg-1), white 8%);
  border-color: var(--brand-500);
  color: var(--btn-fg);
}
.theme-dark .btn--ghost {
  color: var(--btn-ghost-fg);
  background: transparent;
  border-color: transparent;
}
.theme-dark .btn--ghost:hover,
.theme-dark .btn--ghost:focus-visible {
  background: color-mix(in srgb, var(--bg-1), white 8%);
  color: var(--btn-fg);
}