/**
 * TOIAF Design Tokens
 * Version: 1.0.0
 */

:root {
  /* Colors */
  --toiaf-black: #000000;
  --toiaf-yellow: #ffff33;
  --toiaf-purple: #8e2bff;
  --toiaf-lime: #b6ff00;
  --toiaf-aqua: #24f0ff;
  --toiaf-orange: #ff6900;
  --toiaf-pink: #ff2bd6;

  /* Grays */
  --toiaf-gray-dark: #0d0d0d;
  --toiaf-gray: #1a1a1a;
  --toiaf-gray-light: #2a2a2a;

  /* Typography */
  --font-primary: 'Orbitron', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;

  /* Shadows */
  --shadow-purple: 0 0 20px rgba(142, 43, 255, 0.4);
  --shadow-pink: 0 0 20px rgba(255, 43, 214, 0.4);
  --shadow-aqua: 0 0 20px rgba(36, 240, 255, 0.4);
  --shadow-lime: 0 0 20px rgba(182, 255, 0, 0.4);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--toiaf-black);
  color: #ffffff;
  font-family: var(--font-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--toiaf-aqua);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--toiaf-pink);
}

a:focus {
  outline: 2px solid var(--toiaf-purple);
  outline-offset: 2px;
}

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

button,
input,
select,
textarea {
  font-family: var(--font-primary);
}