/* Auto-generated from brand/tokens.json — do not edit manually */
/* Run: npm run generate:tokens */

:root {
  /* color */
  --site-color-primary: #6366F1;
  --site-color-primary-light: #818CF8;
  --site-color-primary-dark: #5558E6;
  --site-color-secondary: #1A1A2E;
  --site-color-background: #0A0A14;
  --site-color-background-light: #F4F4F8;
  --site-color-surface: #111122;
  --site-color-surface-elevated: #1A1A2E;
  --site-color-text: #E8E6E1;
  --site-color-text-muted: #9CA3AF;
  --site-color-text-on-light: #1A1A2E;
  --site-color-text-on-light-muted: #6B7280;
  --site-color-border: #2A2A3E;
  --site-color-border-light: #DDDDE4;
  --site-color-accent: #6366F1;
  --site-color-signal: #F59E0B;
  --site-color-signal-dark: #D97706;
  --site-color-success: #4ADE80;
  --site-color-error: #F87171;
  --site-color-footer-bg: #0A0A14;
  --site-color-footer-text: #9CA3AF;

  /* font */
  --site-font-heading: 'Source Serif 4', 'Georgia', serif;
  --site-font-body: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif;
  --site-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* size */
  --site-size-h1: clamp(3rem, 7vw, 5rem);
  --site-size-h2: clamp(1.75rem, 4vw, 2.5rem);
  --site-size-h3: clamp(1.375rem, 3vw, 1.75rem);
  --site-size-h4: 1.25rem;
  --site-size-body: 1.125rem;
  --site-size-body-small: 1rem;
  --site-size-small: 0.875rem;
  --site-size-caption: 0.75rem;

  /* weight */
  --site-weight-light: 300;
  --site-weight-regular: 400;
  --site-weight-medium: 500;
  --site-weight-semibold: 600;
  --site-weight-bold: 700;

  /* spacing */
  --site-spacing-xs: 0.5rem;
  --site-spacing-sm: 1rem;
  --site-spacing-md: 1.5rem;
  --site-spacing-lg: 3rem;
  --site-spacing-xl: clamp(5rem, 10vw, 8rem);
  --site-spacing-2xl: clamp(6rem, 14vw, 12rem);
  --site-spacing-container-max: 1200px;
  --site-spacing-container-narrow: 660px;

  /* radius */
  --site-radius-sm: 0.25rem;
  --site-radius-md: 0.5rem;
  --site-radius-lg: 0.75rem;
  --site-radius-pill: 999px;

  /* shadow */
  --site-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --site-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
  --site-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);

  /* breakpoint */
  --site-breakpoint-sm: 768px;
  --site-breakpoint-md: 1024px;
  --site-breakpoint-lg: 1280px;

  /* transition */
  --site-transition-fast: 150ms ease;
  --site-transition-normal: 300ms ease;
  --site-transition-slow: 500ms ease;

}

/* Utility classes */
.site-text-primary { color: var(--site-color-primary); }
.site-text-primary-light { color: var(--site-color-primary-light); }
.site-text-primary-dark { color: var(--site-color-primary-dark); }
.site-text-secondary { color: var(--site-color-secondary); }
.site-text-background { color: var(--site-color-background); }
.site-text-background-light { color: var(--site-color-background-light); }
.site-text-surface { color: var(--site-color-surface); }
.site-text-surface-elevated { color: var(--site-color-surface-elevated); }
.site-text-text { color: var(--site-color-text); }
.site-text-text-muted { color: var(--site-color-text-muted); }
.site-text-text-on-light { color: var(--site-color-text-on-light); }
.site-text-text-on-light-muted { color: var(--site-color-text-on-light-muted); }
.site-text-border { color: var(--site-color-border); }
.site-text-border-light { color: var(--site-color-border-light); }
.site-text-accent { color: var(--site-color-accent); }
.site-text-signal { color: var(--site-color-signal); }
.site-text-signal-dark { color: var(--site-color-signal-dark); }
.site-text-success { color: var(--site-color-success); }
.site-text-error { color: var(--site-color-error); }
.site-text-footer-bg { color: var(--site-color-footer-bg); }
.site-text-footer-text { color: var(--site-color-footer-text); }

.site-bg-primary { background-color: var(--site-color-primary); }
.site-bg-primary-light { background-color: var(--site-color-primary-light); }
.site-bg-primary-dark { background-color: var(--site-color-primary-dark); }
.site-bg-secondary { background-color: var(--site-color-secondary); }
.site-bg-background { background-color: var(--site-color-background); }
.site-bg-background-light { background-color: var(--site-color-background-light); }
.site-bg-surface { background-color: var(--site-color-surface); }
.site-bg-surface-elevated { background-color: var(--site-color-surface-elevated); }
.site-bg-text { background-color: var(--site-color-text); }
.site-bg-text-muted { background-color: var(--site-color-text-muted); }
.site-bg-text-on-light { background-color: var(--site-color-text-on-light); }
.site-bg-text-on-light-muted { background-color: var(--site-color-text-on-light-muted); }
.site-bg-border { background-color: var(--site-color-border); }
.site-bg-border-light { background-color: var(--site-color-border-light); }
.site-bg-accent { background-color: var(--site-color-accent); }
.site-bg-signal { background-color: var(--site-color-signal); }
.site-bg-signal-dark { background-color: var(--site-color-signal-dark); }
.site-bg-success { background-color: var(--site-color-success); }
.site-bg-error { background-color: var(--site-color-error); }
.site-bg-footer-bg { background-color: var(--site-color-footer-bg); }
.site-bg-footer-text { background-color: var(--site-color-footer-text); }