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

/* ── Custom Properties — Dark Theme (default) ────────────────────────────────── */
/*
   Structure: dark is the :root default. Light is applied via an explicit
   [data-theme="light"] block (manual) and a media query (system preference).
   This avoids :not() guards, which some browsers don't re-evaluate reliably
   when attributes change at runtime.
*/
:root {
  color-scheme: dark;

  /* Colors — dark theme defaults */
  --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;
  --color-accent-rgb:       123, 108, 246;
  --gradient-accent:        linear-gradient(135deg, #7b6cf6, #a78bfa);
  --gradient-accent-text:   linear-gradient(135deg, #a78bfa, #c4b5fd);
  --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(var(--color-accent-rgb), 0.15);
  --shadow-glow-strong:     0 0 30px rgba(var(--color-accent-rgb), 0.3);
  --color-nav-bg:           rgba(15, 15, 23, 0.85);
  --color-year-bg:          rgba(255, 255, 255, 0.04);

  /* Static palette entries — same in both themes */
  --color-wasm:             #4ade80;
  --color-wasm-rgb:         74, 222, 128;

  /* 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;

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

/* ── Light Theme — system preference ─────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg:               #f4f4f9;
    --color-bg-surface:       #ffffff;
    --color-bg-surface-hover: #ededf7;
    --color-bg-border:        #e0e0ee;
    --color-bg-border-hover:  #a090d8;
    --color-text:             #1a1a2e;
    --color-text-muted:       #4a4a6a;
    --color-text-subtle:      #8080a0;
    --color-accent-1:         #6b5ce7;
    --color-accent-2:         #7b6cf6;
    --color-accent-rgb:       107, 92, 231;
    --gradient-accent:        linear-gradient(135deg, #6b5ce7, #9b8cf6);
    --gradient-accent-text:   linear-gradient(135deg, #5a4dd6, #7b6cf6);
    --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-glow:            0 0 20px rgba(var(--color-accent-rgb), 0.15);
    --shadow-glow-strong:     0 0 30px rgba(var(--color-accent-rgb), 0.3);
    --color-nav-bg:           rgba(244, 244, 249, 0.92);
    --color-year-bg:          rgba(0, 0, 0, 0.06);
  }
}

/* ── Light Theme — manual override (wins over dark system preference) ─────────── */
[data-theme="light"] {
  color-scheme: light;
  --color-bg:               #f4f4f9;
  --color-bg-surface:       #ffffff;
  --color-bg-surface-hover: #ededf7;
  --color-bg-border:        #e0e0ee;
  --color-bg-border-hover:  #a090d8;
  --color-text:             #1a1a2e;
  --color-text-muted:       #4a4a6a;
  --color-text-subtle:      #8080a0;
  --color-accent-1:         #6b5ce7;
  --color-accent-2:         #7b6cf6;
  --color-accent-rgb:       107, 92, 231;
  --gradient-accent:        linear-gradient(135deg, #6b5ce7, #9b8cf6);
  --gradient-accent-text:   linear-gradient(135deg, #5a4dd6, #7b6cf6);
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-glow:            0 0 20px rgba(var(--color-accent-rgb), 0.15);
  --shadow-glow-strong:     0 0 30px rgba(var(--color-accent-rgb), 0.3);
  --color-nav-bg:           rgba(244, 244, 249, 0.92);
  --color-year-bg:          rgba(0, 0, 0, 0.06);
}

/* ── Dark Theme — manual override (wins over light system preference) ─────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --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;
  --color-accent-rgb:       123, 108, 246;
  --gradient-accent:        linear-gradient(135deg, #7b6cf6, #a78bfa);
  --gradient-accent-text:   linear-gradient(135deg, #a78bfa, #c4b5fd);
  --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(var(--color-accent-rgb), 0.15);
  --shadow-glow-strong:     0 0 30px rgba(var(--color-accent-rgb), 0.3);
  --color-nav-bg:           rgba(15, 15, 23, 0.85);
  --color-year-bg:          rgba(255, 255, 255, 0.04);
}

/* ── Theme transition (applied briefly on toggle to smooth color changes) ──────── */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}


/* ── 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;
}