/* =============================================================================
   base.css — Design system: reset, tokens, typography, body
   ============================================================================= */

/* ── Custom Properties (Design Tokens) ──────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:               #0f0f17;
  --color-bg-surface:       #16161f;
  --color-bg-surface-hover: #1c1c2a;
  --color-bg-border:        #2a2a3a;
  --color-bg-border-hover:  #4a3a7a;
  --color-text:             #e2e2f0;
  --color-text-muted:       #9090b0;
  --color-text-subtle:      #5a5a7a;
  --color-accent-1:         #7b6cf6;
  --color-accent-2:         #a78bfa;
  --gradient-accent:        linear-gradient(135deg, #7b6cf6, #a78bfa);
  --gradient-accent-text:   linear-gradient(135deg, #a78bfa, #c4b5fd);

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'JetBrains Mono',
               monospace;

  /* Type scale */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */

  /* Spacing scale (4px base) */
  --space-1:   0.25rem;
  --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;

  /* Layout */
  --content-width:   72rem;
  --content-padding: clamp(var(--space-4), 5vw, var(--space-8));

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 0 20px rgba(123, 108, 246, 0.15);
  --shadow-glow-strong: 0 0 30px rgba(123, 108, 246, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}


/* ── CSS Reset ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent-2);
  text-decoration: none;
}

a:hover {
  color: var(--color-text);
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text);
}


/* ── Typography Utilities ────────────────────────────────────────────────────── */
.text-gradient {
  background: var(--gradient-accent-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-mono {
  font-family: var(--font-mono);
}


/* ── Layout Utilities ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}