:root {
  /* ==========================================================================
     Color tokens — Industry Standard Light Palette (Tailwind/Vercel inspired)
     ========================================================================== */
  --color-background:    #F8FAFC; /* Slate 50 — soft, professional off-white */
  --color-surface:       #FFFFFF; /* Pure white for cards & content surfaces */
  --color-text:          #0F172A; /* Slate 900 — rich, high-contrast primary text */
  --color-text-muted:    #475569; /* Slate 600 — highly readable secondary text */
  --color-primary:       #2563EB; /* Blue 600 — links and primary actions */
  --color-primary-hover: #1D4ED8; /* Blue 700 — hover state */
  --color-border:        #E2E8F0; /* Slate 200 — crisp borders */
  --color-focus:         #2563EB; /* Keyboard focus indicator */
  --color-header-bg:     rgba(248, 250, 252, 0.85); /* Header frosted glass background */

  /* Dark mode base values — Industry Standard Dark Palette */
  --color-background-dark: #0B0F19; /* Deep rich dark slate/navy */
  --color-surface-dark:     #111827; /* Gray 900 — elevated surfaces/cards */
  --color-text-dark:        #F9FAFB; /* Gray 50 — brilliant, high-contrast white text */
  --color-text-muted:    #9CA3AF; /* Gray 400 — clearly visible secondary text */
  --color-border-dark:      #1F2937; /* Gray 800 — clean dark dividers */
  --color-header-bg-dark:   rgba(17, 24, 39, 0.85);

  /* ==========================================================================
     Typography — font family (DESIGN.md §6)
     ========================================================================== */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* ==========================================================================
     Typography — type scale (DESIGN.md §6)
     ========================================================================== */
  --text-hero:    3rem;       /* 48px — hero name / primary statement */
  --text-h1:      2.5rem;     /* 40px — main page heading             */
  --text-h2:      1.875rem;   /* 30px — major section heading         */
  --text-h3:      1.375rem;   /* 22px — subsection heading            */
  --text-h4:      1.125rem;   /* 18px — card title / smaller heading  */
  --text-body:    1.0625rem;  /* 17px — article body                  */
  --text-small:   0.875rem;   /* 14px — supporting text               */
  --text-caption: 0.8125rem;  /* 13px — metadata and captions         */

  /* ==========================================================================
     Spacing scale (DESIGN.md §7)
     ========================================================================== */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* ==========================================================================
     Border radius scale (DESIGN.md §7 "Shape and elevation")
     ========================================================================== */
  --radius-sm: 0.375rem; /*  6px — small controls */
  --radius-md: 0.625rem; /* 10px — cards          */
  --radius-lg: 0.75rem;  /* 12px — larger images / hero */

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast:   150ms ease-in-out;
  --transition-medium: 200ms ease-in-out;
}

/* Dark mode & Theme overrides */
[data-theme="dark"] {
  --color-background: var(--color-background-dark);
  --color-text:       var(--color-text-dark);
  --color-border:     var(--color-border-dark);
  --color-surface:    var(--color-surface-dark);
  --color-header-bg:  var(--color-header-bg-dark);
}

[data-theme="light"] {
  --color-background: #F8FAFC;
  --color-text:       #0F172A;
  --color-border:     #E2E8F0;
  --color-surface:    #FFFFFF;
  --color-header-bg:  rgba(248, 250, 252, 0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: var(--color-background-dark);
    --color-text:       var(--color-text-dark);
    --color-border:     var(--color-border-dark);
    --color-surface:    var(--color-surface-dark);
    --color-header-bg:  var(--color-header-bg-dark);
  }
}

/* Utility classes */
.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-primary);
  color: var(--color-background);
  padding: 0.5rem 1rem;
  z-index: 100;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: var(--color-background);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-medium);
}
.btn:hover { background: var(--color-primary-hover); }
.btn:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn--secondary:hover { background: var(--color-border); }