/**
 * Aktagon Design Tokens
 * Auto-generated from tokens.json
 * Do not edit directly
 */

:root {
  --color-base-black: #000000;
  --color-base-white: #ffffff;
  --color-base-gray-50: #f5f5f5;
  --color-base-gray-100: #e5e5e5;
  --color-base-gray-200: #c8c8c8;
  --color-base-gray-300: #999999;
  --color-base-gray-400: #888888;
  --color-base-gray-500: #555555;
  --color-base-gray-600: #2d2d2d;
  --color-base-gray-700: #1e1e1e;
  --color-base-gray-800: #181818;
  --color-base-gray-850: #141414;
  --color-base-gray-900: #0a0a0a;
  --color-base-blue-400: #569cd6;
  --color-base-blue-500: #3b82f6;
  --color-base-blue-600: #007acc;
  --color-base-blue-700: #0069af;
  --color-base-blue-glow: rgba(59, 130, 246, 0.55);
  --color-base-blue-subtle: rgba(59, 130, 246, 0.2);
  --color-base-blue-shadow: #0069af42;
  --color-base-syntax-comment: #6a9955;
  --color-base-syntax-keyword: #569cd6;
  --color-base-syntax-string: #ce9178;
  --color-base-syntax-identifier: #9cdcfe;
  --color-base-syntax-function: #dcdcaa;
  --color-base-syntax-number: #b5cea8;
  --color-base-traffic-light-red: #ff5f57;
  --color-base-traffic-light-yellow: #ffbd2e;
  --color-base-traffic-light-green: #28ca42;
  --color-semantic-background-primary: #0a0a0a;
  --color-semantic-background-secondary: #141414;
  --color-semantic-background-tertiary: #1e1e1e;
  --color-semantic-background-elevated: #181818;
  --color-semantic-background-surface: #000000;
  --color-semantic-background-overlay: rgba(20, 20, 20, 0.8);
  --color-semantic-background-overlay-strong: rgba(20, 20, 20, 0.95);
  --color-semantic-background-light: #f5f5f5;
  --color-semantic-text-primary: #ffffff;
  --color-semantic-text-secondary: #999999;
  --color-semantic-text-muted: #555555;
  --color-semantic-text-dark: #0a0a0a;
  --color-semantic-text-link: #555555;
  --color-semantic-text-link-hover: #3b82f6;
  --color-semantic-border-default: #2d2d2d;
  --color-semantic-border-light: #e5e5e5;
  --color-semantic-border-subtle: rgba(255, 255, 255, 0.3);
  --color-semantic-accent-primary: #3b82f6;
  --color-semantic-accent-secondary: #007acc;
  --color-semantic-interactive-focus: #3b82f6;
  --color-semantic-interactive-hover: rgba(255, 255, 255, 0.05);
  --color-semantic-interactive-active: rgba(59, 130, 246, 0.2);
  --color-component-button-primary-bg: #ffffff;
  --color-component-button-primary-text: #0a0a0a;
  --color-component-button-primary-hover: #f0f0f0;
  --color-component-button-secondary-bg: transparent;
  --color-component-button-secondary-text: #ffffff;
  --color-component-button-secondary-border: rgba(255, 255, 255, 0.3);
  --color-component-button-secondary-hover-border: rgba(255, 255, 255, 0.5);
  --color-component-button-secondary-hover-bg: rgba(255, 255, 255, 0.1);
  --color-component-nav-tab-bg: rgba(20, 20, 20, 0.8);
  --color-component-nav-tab-active-bg: #1e1e1e;
  --color-component-nav-tab-shadow: #0069af42;
  --color-component-status-bar-bg: #007acc;
  --color-component-status-bar-text: #ffffff;
  --color-component-beacon-dot: #3b82f6;
  --color-component-beacon-ring: rgba(59, 130, 246, 0.55);
  --color-component-editor-bg: #0a0a0a;
  --color-component-editor-content: #e8e8e8;
  --color-component-editor-gui-surface: rgba(200, 200, 200, 0.95);
  --color-component-editor-gui-surface-alt: rgba(200, 200, 200, 0.9);
  --color-component-footer-bg: #f5f5f5;
  --color-component-footer-border: #e5e5e5;
  --color-component-footer-heading: #0a0a0a;
  --color-component-footer-text: #555555;
  --color-component-footer-text-muted: #888888;
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-15: 60px;
  --spacing-20: 80px;
  --spacing-25: 100px;
  --spacing-base: 8px;
  --spacing-layout-page-padding-mobile: 20px;
  --spacing-layout-page-padding-tablet: 50px;
  --spacing-layout-page-padding-desktop: 100px;
  --spacing-layout-section-gap: 40px;
  --spacing-layout-component-gap: 16px;
  --size-sidebar-width: 240px;
  --size-mobile-nav-width: 200px;
  --size-article-max-width: 780px;
  --size-footer-max-width: 600px;
  --size-icon-sm: 12px;
  --size-icon-md: 16px;
  --size-icon-lg: 20px;
  --size-button-height-sm: 20px;
  --size-button-height-md: 44px;
  --size-button-min-touch: 44px;
  --size-header-height: 30px;
  --size-header-tab-height: 36px;
  --size-header-status-bar: 22px;
  --size-traffic-light: 12px;
  --size-beacon: 16px;
  --size-beacon-hero: 12px;
  --typography-font-family-sans: Inter, system-ui, sans-serif;
  --typography-font-family-mono: Monaco, Menlo, monospace;
  --typography-font-size-xs: 11px;
  --typography-font-size-sm: 12px;
  --typography-font-size-base: 13px;
  --typography-font-size-md: 14px;
  --typography-font-size-lg: 16px;
  --typography-font-size-xl: 18px;
  --typography-font-size-2xl: 24px;
  --typography-font-size-3xl: 36px;
  --typography-font-size-hero: 3.5rem;
  --typography-font-size-hero-subtitle: 1.2rem;
  --typography-font-weight-normal: 400;
  --typography-font-weight-medium: 500;
  --typography-font-weight-bold: 700;
  --typography-font-weight-black: 900;
  --typography-font-line-height-tight: 1.1;
  --typography-font-line-height-snug: 1.4;
  --typography-font-line-height-normal: 1.5;
  --typography-font-line-height-relaxed: 1.6;
  --typography-font-letter-spacing-normal: 0;
  --typography-font-letter-spacing-wide: 0.05em;
  --border-radius-none: 0;
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 10px;
  --border-radius-full: 50%;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.3);
  --shadow-focus-strong: 0 0 0 3px rgba(255, 255, 255, 0.5);
  --shadow-nav: 0px 0px 10px #0069af42;
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-editor: 0px 0px 400px #0069af42;
  --shadow-beacon-glow: 0 0 14px rgba(59, 130, 246, 0.9), 0 0 0 6px rgba(59, 130, 246, 0.15);
  --shadow-beacon-throb: 0 0 12px rgba(59, 130, 246, 1), 0 0 0 6px rgba(59, 130, 246, 0.15);
  --shadow-beacon-throb-peak: 0 0 24px rgba(59, 130, 246, 1), 0 0 0 10px rgba(59, 130, 246, 0.10);
  --duration-instant: 0ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-appear: 2000ms;
  --duration-appear-slow: 4000ms;
  --duration-beacon: 2200ms;
  --duration-logo-grayscale: 4000ms;
  --easing-linear: cubic-bezier(0, 0, 1, 1);
  --easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.58, 1);
  --easing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --easing-appear: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --breakpoint-mobile: 640px;
  --breakpoint-tablet-small: 641px;
  --breakpoint-tablet-large: 800px;
  --breakpoint-desktop: 1024px;
  --z-index-base: 1;
  --z-index-dropdown: 10;
  --z-index-sticky: 50;
  --z-index-header: 100;
  --z-index-modal: 1000;
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
}