/* ====================================
   DESIGN TOKEN SYSTEM
   Three-layer architecture for scalable, maintainable design system
   ==================================== */

:root {
  /* ====================================
     LAYER 1: PRIMITIVE TOKENS
     Raw design values - never use directly in components
     ==================================== */

  /* --- Colors: Charcoal Palette --- */
  --primitive-color-charcoal-900: #0A0A0A;
  --primitive-color-charcoal-800: #0E0E0E;
  --primitive-color-charcoal-700: #1A1A1A;
  --primitive-color-charcoal-600: #262626;
  --primitive-color-charcoal-500: #404040;

  /* --- Colors: Neon Green Palette --- */
  --primitive-color-neon-green-300: #4ADE80;
  --primitive-color-neon-green-400: #22C55E;
  --primitive-color-neon-green-500: #16A34A;
  --primitive-color-neon-green-600: #15803D;

  /* --- Colors: Electric Blue Palette --- */
  --primitive-color-electric-blue-300: #60A5FA;
  --primitive-color-electric-blue-400: #3A82FF;
  --primitive-color-electric-blue-500: #2563EB;

  /* --- Colors: Gray Palette --- */
  --primitive-color-gray-50: #F9FAFB;
  --primitive-color-gray-100: #F3F4F6;
  --primitive-color-gray-200: #E5E7EB;
  --primitive-color-gray-300: #D1D5DB;
  --primitive-color-gray-400: #9CA3AF;
  --primitive-color-gray-500: #6B7280;
  --primitive-color-gray-600: #4B5563;
  --primitive-color-gray-700: #374151;
  --primitive-color-gray-800: #1F2937;

  /* --- Spacing: 4px base scale --- */
  --primitive-spacing-1: 0.25rem;   /* 4px */
  --primitive-spacing-2: 0.5rem;    /* 8px */
  --primitive-spacing-3: 0.75rem;   /* 12px */
  --primitive-spacing-4: 1rem;      /* 16px */
  --primitive-spacing-5: 1.25rem;   /* 20px */
  --primitive-spacing-6: 1.5rem;    /* 24px */
  --primitive-spacing-8: 2rem;      /* 32px */
  --primitive-spacing-10: 2.5rem;   /* 40px */
  --primitive-spacing-12: 3rem;     /* 48px */

  /* --- Typography: Font Families --- */
  --primitive-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --primitive-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* --- Typography: Font Sizes --- */
  --primitive-font-size-xs: 0.75rem;    /* 12px */
  --primitive-font-size-sm: 0.875rem;   /* 14px */
  --primitive-font-size-base: 1rem;     /* 16px */
  --primitive-font-size-lg: 1.125rem;   /* 18px */
  --primitive-font-size-xl: 1.25rem;    /* 20px */
  --primitive-font-size-2xl: 1.5rem;    /* 24px */
  --primitive-font-size-3xl: 1.875rem;  /* 30px */
  --primitive-font-size-4xl: 2.25rem;   /* 36px */

  /* --- Typography: Font Weights --- */
  --primitive-font-weight-normal: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;

  /* --- Typography: Line Heights --- */
  --primitive-line-height-tight: 1.25;
  --primitive-line-height-normal: 1.5;
  --primitive-line-height-relaxed: 1.75;

  /* --- Border Radius --- */
  --primitive-border-radius-sm: 0.125rem;   /* 2px */
  --primitive-border-radius-base: 0.25rem;  /* 4px */
  --primitive-border-radius-md: 0.375rem;   /* 6px */
  --primitive-border-radius-lg: 0.5rem;     /* 8px */
  --primitive-border-radius-xl: 0.75rem;    /* 12px */
  --primitive-border-radius-2xl: 1rem;      /* 16px */
  --primitive-border-radius-full: 9999px;


  /* ====================================
     LAYER 2: SEMANTIC TOKENS
     Map primitives to UI roles - use these in components
     ==================================== */

  /* --- Background Colors --- */
  --color-bg-primary: var(--primitive-color-charcoal-800, #0E0E0E);
  --color-bg-secondary: var(--primitive-color-charcoal-700, #1A1A1A);
  --color-bg-elevated: var(--primitive-color-charcoal-600, #262626);
  --color-bg-overlay: var(--primitive-color-charcoal-900, #0A0A0A);

  /* --- Text Colors --- */
  --color-text-primary: var(--primitive-color-gray-50, #F9FAFB);
  --color-text-secondary: var(--primitive-color-gray-100, #F3F4F6);
  --color-text-muted: var(--primitive-color-gray-200, #E5E7EB);
  --color-text-disabled: var(--primitive-color-gray-400, #9CA3AF);

  /* --- Interactive Colors --- */
  --color-interactive-primary: var(--primitive-color-neon-green-400, #22C55E);
  --color-interactive-primary-hover: var(--primitive-color-neon-green-300, #4ADE80);
  --color-interactive-primary-active: var(--primitive-color-neon-green-500, #16A34A);
  --color-interactive-secondary: var(--primitive-color-electric-blue-400, #3A82FF);
  --color-interactive-secondary-hover: var(--primitive-color-electric-blue-300, #60A5FA);
  --color-interactive-secondary-active: var(--primitive-color-electric-blue-500, #2563EB);

  /* --- Border Colors --- */
  --color-border-default: var(--primitive-color-charcoal-500, #404040);
  --color-border-focus: var(--primitive-color-neon-green-400, #22C55E);

  /* --- Spacing Semantic --- */
  --spacing-page-padding-mobile: var(--primitive-spacing-4, 1rem);
  --spacing-page-padding-desktop: var(--primitive-spacing-8, 2rem);
  --spacing-section-gap: var(--primitive-spacing-12, 3rem);
  --spacing-component-gap: var(--primitive-spacing-6, 1.5rem);
  --spacing-element-gap: var(--primitive-spacing-3, 0.75rem);

  /* --- Typography Semantic --- */
  --font-family-base: var(--primitive-font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  --font-family-code: var(--primitive-font-mono, 'SF Mono', monospace);

  --font-size-heading-1: var(--primitive-font-size-4xl, 2.25rem);
  --font-size-heading-2: var(--primitive-font-size-3xl, 1.875rem);
  --font-size-heading-3: var(--primitive-font-size-2xl, 1.5rem);
  --font-size-heading-4: var(--primitive-font-size-xl, 1.25rem);
  --font-size-body: var(--primitive-font-size-base, 1rem);
  --font-size-caption: var(--primitive-font-size-sm, 0.875rem);
  --font-size-code: var(--primitive-font-size-sm, 0.875rem);

  --font-weight-heading: var(--primitive-font-weight-bold, 700);
  --font-weight-body: var(--primitive-font-weight-normal, 400);
  --font-weight-emphasis: var(--primitive-font-weight-semibold, 600);

  --line-height-heading: var(--primitive-line-height-tight, 1.25);
  --line-height-body: var(--primitive-line-height-normal, 1.5);

  /* --- Border Radius Semantic --- */
  --border-radius-button: var(--primitive-border-radius-md, 0.375rem);
  --border-radius-card: var(--primitive-border-radius-lg, 0.5rem);
  --border-radius-input: var(--primitive-border-radius-base, 0.25rem);
  --border-radius-pill: var(--primitive-border-radius-full, 9999px);
}


/* ====================================
   LAYER 3: COMPONENT TOKENS
   Reusable component classes using semantic tokens
   ==================================== */

/* --- Typography Components --- */
h1, .heading-1 {
  font-family: var(--font-family-base, -apple-system, sans-serif);
  font-size: var(--font-size-heading-1, 2.25rem);
  font-weight: var(--font-weight-heading, 700);
  line-height: var(--line-height-heading, 1.25);
  color: var(--color-text-primary, #F9FAFB);
  margin: 0 0 var(--spacing-component-gap, 1.5rem) 0;
}

h2, .heading-2 {
  font-family: var(--font-family-base, -apple-system, sans-serif);
  font-size: var(--font-size-heading-2, 1.875rem);
  font-weight: var(--font-weight-heading, 700);
  line-height: var(--line-height-heading, 1.25);
  color: var(--color-text-primary, #F9FAFB);
  margin: 0 0 var(--spacing-component-gap, 1.5rem) 0;
}

h3, .heading-3 {
  font-family: var(--font-family-base, -apple-system, sans-serif);
  font-size: var(--font-size-heading-3, 1.5rem);
  font-weight: var(--font-weight-heading, 700);
  line-height: var(--line-height-heading, 1.25);
  color: var(--color-text-primary, #F9FAFB);
  margin: 0 0 var(--spacing-element-gap, 0.75rem) 0;
}

.body-text {
  font-family: var(--font-family-base, -apple-system, sans-serif);
  font-size: var(--font-size-body, 1rem);
  font-weight: var(--font-weight-body, 400);
  line-height: var(--line-height-body, 1.5);
  color: var(--color-text-primary, #F9FAFB);
}

.caption {
  font-family: var(--font-family-base, -apple-system, sans-serif);
  font-size: var(--font-size-caption, 0.875rem);
  font-weight: var(--font-weight-body, 400);
  line-height: var(--line-height-body, 1.5);
  color: var(--color-text-muted, #E5E7EB);
}

/* --- Button Components --- */
.button-primary {
  display: inline-block;
  padding: var(--spacing-element-gap, 0.75rem) var(--spacing-component-gap, 1.5rem);
  font-family: var(--font-family-base, -apple-system, sans-serif);
  font-size: var(--font-size-body, 1rem);
  font-weight: var(--font-weight-emphasis, 600);
  line-height: var(--line-height-body, 1.5);
  color: var(--color-bg-primary, #0E0E0E);
  background-color: var(--color-interactive-primary, #22C55E);
  border: none;
  border-radius: var(--border-radius-button, 0.375rem);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.button-primary:hover {
  background-color: var(--color-interactive-primary-hover, #4ADE80);
  transform: translateY(-1px);
}

.button-primary:active {
  background-color: var(--color-interactive-primary-active, #16A34A);
  transform: translateY(0);
}

.button-primary:focus-visible {
  outline: 2px solid var(--color-border-focus, #22C55E);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.button-secondary {
  display: inline-block;
  padding: var(--spacing-element-gap, 0.75rem) var(--spacing-component-gap, 1.5rem);
  font-family: var(--font-family-base, -apple-system, sans-serif);
  font-size: var(--font-size-body, 1rem);
  font-weight: var(--font-weight-emphasis, 600);
  line-height: var(--line-height-body, 1.5);
  color: var(--color-text-primary, #F9FAFB);
  background-color: var(--color-interactive-secondary, #3A82FF);
  border: none;
  border-radius: var(--border-radius-button, 0.375rem);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.button-secondary:hover {
  background-color: var(--color-interactive-secondary-hover, #60A5FA);
  transform: translateY(-1px);
}

.button-secondary:active {
  background-color: var(--color-interactive-secondary-active, #2563EB);
  transform: translateY(0);
}

.button-secondary:focus-visible {
  outline: 2px solid var(--color-border-focus, #22C55E);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

/* --- Card Component --- */
.card {
  background-color: var(--color-bg-secondary, #1A1A1A);
  border: 1px solid var(--color-border-default, #404040);
  border-radius: var(--border-radius-card, 0.5rem);
  padding: var(--spacing-component-gap, 1.5rem);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--color-interactive-primary, #22C55E);
  transform: translateY(-2px);
}

/* --- Code Block Component --- */
code, .code-inline {
  font-family: var(--font-family-code, 'SF Mono', monospace);
  font-size: var(--font-size-code, 0.875rem);
  background-color: var(--color-bg-elevated, #262626);
  color: var(--color-interactive-primary, #22C55E);
  padding: var(--primitive-spacing-1, 0.25rem) var(--primitive-spacing-2, 0.5rem);
  border-radius: var(--border-radius-input, 0.25rem);
}

pre {
  font-family: var(--font-family-code, 'SF Mono', monospace);
  font-size: var(--font-size-code, 0.875rem);
  background-color: var(--color-bg-elevated, #262626);
  color: var(--color-text-secondary, #F3F4F6);
  padding: var(--spacing-component-gap, 1.5rem);
  border-radius: var(--border-radius-card, 0.5rem);
  overflow-x: auto;
  border: 1px solid var(--color-border-default, #404040);
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}