/* =========================
   Tokens
========================= */
:root {
  --color-bg: #ffffff;
  --color-fg: #0b1220;
  --color-muted: rgba(11, 18, 32, 0.68);
  --color-border: rgba(11, 18, 32, 0.1);
  --color-brand: #2473f4;

  --color-accent: var(--color-brand);
  --color-accent-2: #7a5cff;
  --color-tint-1: rgba(36, 115, 244, 0.1);
  --color-tint-2: rgba(122, 92, 255, 0.07);
  --color-tint-3: rgba(36, 115, 244, 0.045);

  --gradient-hero:
    radial-gradient(780px 420px at 18% 8%, var(--color-tint-1), transparent 64%),
    radial-gradient(760px 380px at 82% 18%, var(--color-tint-2), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);

  --gradient-section:
    radial-gradient(700px 360px at 18% 0%, var(--color-tint-3), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);

  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%);

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;

  --text-sm: 0.95rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-2xl: 2.15rem;
  --text-3xl: 3rem;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-card: 12px;
  --radius-button: 10px;
  --radius-small: 8px;
  --radius-sm: var(--radius-small);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-card);
  --shadow-sm: 0 6px 18px rgba(11, 18, 32, 0.06);

  --container: 1080px;
}

/* =========================
   Reset / Base
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-fg);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

main a:not(.btn):not(.project-link) {
  color: var(--color-brand);
}

p {
  margin: 0 0 var(--space-5);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================
   Accessibility helpers
========================= */
.skip-link {
  position: fixed;
  left: -9999px;
  top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(36, 115, 244, 0.18);
  color: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1200;
  text-decoration: none;
  transition: left 120ms ease-out;
}

.skip-link:focus {
  left: -9999px;
}

.skip-link:focus-visible {
  left: var(--space-4);
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

/* =========================
   Typography
========================= */
h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.2rem, 4vw, var(--text-3xl));
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.55rem, 2.4vw, var(--text-2xl));
  line-height: 1.15;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.2;
}

/* Respect reduced motion user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}