/* ===== OPERATIVE BRAND DESIGN SYSTEM ===== */
/* Semantic Color Tokens - Single Source of Truth */
/* Version: Next Generation - Optimized */

:root {
    /* ===== DESIGN TOKENS FOUNDATION ===== */

    /* Base Colors - Pure color values */
    --color-black: #000000;
    --color-white: #ffffff;

    /* Brand Colors - Intentional brand identity */
    --color-brand-primary: #0088dd;
    /* Main brand blue - trust, technology */
    --color-brand-secondary: #00ffff;
    /* Cyan accent - innovation, energy */
    --color-brand-tertiary: #004488;
    /* Dark blue - depth, stability */
    --color-brand-accent: #00aaff;
    /* Bright blue - highlights, calls-to-action */
    --color-brand-muted: #0066aa;
    /* Muted blue - subtle interactions */

    /* Surface Colors - Intentional hierarchy for UI surfaces */
    --color-surface-base: #0a0a0a;
    /* Deepest surface - main background */
    --color-surface-elevated: #111111;
    /* Slightly elevated - cards, panels */
    --color-surface-high: #1a1a1a;
    /* High elevation - modals, dropdowns */
    --color-surface-overlay: #1f1f1f;
    /* Overlay surfaces - tooltips, menus */
    --color-surface-card: #151515;
    /* Card backgrounds - content containers */
    --color-surface-input: #0d0d0d;
    /* Input fields - form elements */
    --color-surface-hover: #1e1e1e;
    /* Hover states - interactive elements */

    /* Text Colors - Intentional contrast hierarchy */
    --color-text-emphasis: #ffffff;
    /* Highest contrast - headings, important text */
    --color-text-default: #cccccc;
    /* Default body text - readable content */
    --color-text-subtle: #999999;
    /* Secondary text - captions, metadata */
    --color-text-disabled: #666666;
    /* Disabled text - inactive elements */
    --color-text-inverse: #000000;
    /* Text on light backgrounds - buttons */
    --color-text-muted: #888888;
    /* Muted text - less important info */
    --color-text-accent-readable: #00aaff;
    /* Readable accent text - better contrast than tertiary */

    /* Interactive Colors - Intentional states */
    --color-interactive-primary: #0088dd;
    /* Primary actions - main buttons */
    --color-interactive-secondary: #00ffff;
    /* Secondary actions - alternative buttons */
    --color-interactive-hover: #00aaff;
    /* Hover states - enhanced interaction */
    --color-interactive-active: #0066aa;
    /* Active/pressed states - feedback */
    --color-interactive-focus: #00ffff;
    /* Focus indicators - accessibility */
    --color-interactive-disabled: #444444;
    /* Disabled interactions - inactive */
    --color-interactive-danger: #ff4444;
    /* Destructive actions - delete, remove */

    /* Feedback Colors - Intentional semantic meaning */
    --color-feedback-success: #00ff00;
    /* Success states - confirmations */
    --color-feedback-error: #ff6b6b;
    /* Error states - problems, failures */
    --color-feedback-warning: #ffaa00;
    /* Warning states - cautions */
    --color-feedback-info: #00aaff;
    /* Information states - tips, help */
    --color-feedback-neutral: #888888;
    /* Neutral states - loading, pending */

    /* Border Colors - Intentional separation */
    --color-border-subtle: #222222;
    /* Subtle borders - minimal separation */
    --color-border-default: #333333;
    /* Default borders - standard separation */
    --color-border-emphasis: #444444;
    /* Emphasized borders - strong separation */
    --color-border-interactive: #0088dd;
    /* Interactive borders - form focus */
    --color-border-focus: #00ffff;
    /* Focus borders - accessibility */
    --color-border-error: #ff6b6b;
    /* Error borders - validation */
    --color-border-success: #00ff00;
    /* Success borders - validation */

    /* Shadow Colors - Intentional depth */
    --color-shadow-subtle: #000000;
    /* Subtle shadows - minimal depth */
    --color-shadow-default: #000000;
    /* Default shadows - standard depth */
    --color-shadow-emphasis: #0088dd;
    /* Colored shadows - brand emphasis */
    --color-shadow-glow: #00ffff;
    /* Glow effects - highlights */
    --color-shadow-error: #ff6b6b;
    /* Error shadows - validation feedback */
    --color-shadow-success: #00ff00;
    /* Success shadows - validation feedback */

    /* ===== TYPOGRAPHY TOKENS ===== */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'Orbitron', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===== SPACING SCALE ===== */
    --space-0: 0;
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */
    --space-32: 8rem;
    /* 128px */

    /* ===== BORDER RADIUS SCALE ===== */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    /* 2px */
    --radius-base: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 6px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* ===== SHADOW SCALE ===== */
    --shadow-sm: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow-subtle) 5%, transparent);
    --shadow-base: 0 1px 3px 0 color-mix(in oklab, var(--color-shadow-default) 10%, transparent), 0 1px 2px 0 color-mix(in oklab, var(--color-shadow-default) 6%, transparent);
    --shadow-md: 0 4px 6px -1px color-mix(in oklab, var(--color-shadow-default) 10%, transparent), 0 2px 4px -1px color-mix(in oklab, var(--color-shadow-default) 6%, transparent);
    --shadow-lg: 0 10px 15px -3px color-mix(in oklab, var(--color-shadow-default) 10%, transparent), 0 4px 6px -2px color-mix(in oklab, var(--color-shadow-default) 5%, transparent);
    --shadow-xl: 0 20px 25px -5px color-mix(in oklab, var(--color-shadow-default) 10%, transparent), 0 10px 10px -5px color-mix(in oklab, var(--color-shadow-default) 4%, transparent);
    --shadow-2xl: 0 25px 50px -12px color-mix(in oklab, var(--color-shadow-default) 25%, transparent);

    /* ===== ANIMATION TOKENS ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-bounce: 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ===== Z-INDEX SCALE ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* ===== SEMANTIC COMPONENT VARIABLES ===== */
    /* These reference the design tokens above for consistent usage */

    /* Backgrounds */
    --bg-body: var(--color-surface-base);
    --bg-navbar: color-mix(in oklab, var(--color-surface-base) 70%, transparent);
    --bg-footer: color-mix(in oklab, var(--color-surface-base) 30%, transparent);
    --bg-section-dark: var(--color-surface-base);
    --bg-section-light: var(--color-surface-elevated);
    --bg-card: var(--color-surface-card);
    --bg-card-hover: var(--color-surface-hover);
    --bg-card-accent: color-mix(in oklab, var(--color-brand-primary) 5%, transparent);
    --bg-card-accent-light: color-mix(in oklab, var(--color-brand-secondary) 8%, transparent);
    --bg-card-accent-dark: color-mix(in oklab, var(--color-brand-tertiary) 8%, transparent);
    --bg-form: color-mix(in oklab, var(--color-white) 5%, transparent);
    --bg-input: var(--color-surface-input);
    --bg-dropdown: color-mix(in oklab, var(--color-surface-base) 95%, transparent);
    --bg-back-to-top: color-mix(in oklab, var(--color-white) 10%, transparent);
    --bg-back-to-top-hover: color-mix(in oklab, var(--color-white) 20%, transparent);

    /* Borders */
    --border-primary: color-mix(in oklab, var(--color-border-default) 10%, transparent);
    --border-secondary: color-mix(in oklab, var(--color-border-emphasis) 20%, transparent);
    --border-accent: color-mix(in oklab, var(--color-border-interactive) 10%, transparent);
    --border-accent-light: color-mix(in oklab, var(--color-brand-secondary) 15%, transparent);
    --border-accent-dark: color-mix(in oklab, var(--color-brand-tertiary) 20%, transparent);
    --border-accent-medium: color-mix(in oklab, var(--color-border-interactive) 20%, transparent);
    --border-accent-strong: color-mix(in oklab, var(--color-border-interactive) 30%, transparent);
    --border-accent-heavy: color-mix(in oklab, var(--color-border-interactive) 40%, transparent);
    --border-accent-card: color-mix(in oklab, var(--color-border-interactive) 18%, transparent);
    --border-input: color-mix(in oklab, var(--color-border-interactive) 30%, transparent);
    --border-input-focus: var(--color-border-focus);
    --border-error: color-mix(in oklab, var(--color-border-error) 30%, transparent);
    --border-success: color-mix(in oklab, var(--color-border-success) 30%, transparent);
    --border-visible: color-mix(in oklab, var(--color-border-emphasis) 30%, transparent);
    --border-visible-strong: color-mix(in oklab, var(--color-text-subtle) 40%, transparent);

    /* Text */
    --text-primary: var(--color-text-emphasis);
    --text-secondary: var(--color-text-default);
    --text-tertiary: var(--color-text-subtle);
    --text-muted: var(--color-text-muted);
    --text-dark: var(--color-text-inverse);
    --text-accent: var(--color-brand-primary);
    --text-accent-light: var(--color-brand-secondary);
    --text-accent-dark: var(--color-text-accent-readable);
    --text-accent-blue: var(--color-text-accent-readable);
    --text-error: var(--color-feedback-error);
    --text-success: var(--color-feedback-success);
    --text-trademark: color-mix(in oklab, var(--color-text-emphasis) 60%, transparent);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-tertiary));
    --gradient-primary-reverse: linear-gradient(135deg, var(--color-brand-tertiary), var(--color-brand-primary));
    --gradient-primary-light: linear-gradient(135deg, var(--color-brand-secondary), var(--color-brand-primary));
    --gradient-primary-dark: linear-gradient(135deg, var(--color-brand-tertiary), var(--color-brand-primary));
    --gradient-text: linear-gradient(135deg, var(--color-text-emphasis), var(--color-brand-primary));
    --gradient-text-light: linear-gradient(135deg, var(--color-text-emphasis), var(--color-brand-secondary));
    --gradient-text-dark: linear-gradient(135deg, var(--color-text-emphasis), var(--color-text-accent-readable));
    --gradient-text-reverse: linear-gradient(135deg, var(--color-brand-primary), var(--color-text-emphasis));
    --gradient-text-animated: linear-gradient(135deg, var(--color-brand-primary), var(--color-text-accent-readable), var(--color-brand-primary));
    --gradient-bg-hero: linear-gradient(to bottom, color-mix(in oklab, var(--color-surface-elevated) 80%, transparent), color-mix(in oklab, var(--color-surface-base) 80%, transparent));
    --gradient-bg-section: linear-gradient(to bottom, color-mix(in oklab, var(--color-surface-base) 80%, transparent), color-mix(in oklab, var(--color-surface-elevated) 80%, transparent));
    --gradient-bg-cta: linear-gradient(to top, color-mix(in oklab, var(--color-surface-elevated) 60%, transparent) 0%, color-mix(in oklab, var(--color-surface-base) 80%, transparent) 100%);
    --gradient-bg-card: linear-gradient(135deg, color-mix(in oklab, var(--color-brand-primary) 5%, transparent), color-mix(in oklab, var(--color-white) 2%, transparent));
    --gradient-bg-card-light: linear-gradient(135deg, color-mix(in oklab, var(--color-brand-secondary) 8%, transparent), color-mix(in oklab, var(--color-white) 3%, transparent));
    --gradient-bg-card-dark: linear-gradient(135deg, color-mix(in oklab, var(--color-brand-tertiary) 8%, transparent), color-mix(in oklab, var(--color-white) 3%, transparent));

    /* Shadows */
    --shadow-primary: 0 10px 25px color-mix(in oklab, var(--color-shadow-emphasis) 30%, transparent);
    --shadow-primary-light: 0 10px 25px color-mix(in oklab, var(--color-shadow-glow) 25%, transparent);
    --shadow-primary-dark: 0 10px 25px color-mix(in oklab, var(--color-brand-tertiary) 35%, transparent);
    --shadow-card: 0 8px 32px color-mix(in oklab, var(--color-shadow-emphasis) 8%, transparent);
    --shadow-card-light: 0 8px 32px color-mix(in oklab, var(--color-shadow-glow) 10%, transparent);
    --shadow-card-dark: 0 8px 32px color-mix(in oklab, var(--color-brand-tertiary) 12%, transparent);
    --shadow-card-hover: 0 10px 30px color-mix(in oklab, var(--color-shadow-emphasis) 20%, transparent);
    --shadow-service-hover: 0 15px 40px color-mix(in oklab, var(--color-shadow-emphasis) 15%, transparent);
    --shadow-work-hover: 0 12px 35px color-mix(in oklab, var(--color-shadow-emphasis) 12%, transparent);
    --shadow-back-to-top: 0 4px 12px color-mix(in oklab, var(--color-shadow-subtle) 30%, transparent);
    --shadow-dropdown: 0 8px 32px color-mix(in oklab, var(--color-shadow-default) 40%, transparent);
    --shadow-input-focus: 0 0 0 3px color-mix(in oklab, var(--color-shadow-glow) 10%, transparent);
    --shadow-text-glow: 0 0 10px color-mix(in oklab, var(--color-shadow-emphasis) 50%, transparent);
    --shadow-text-glow-light: 0 0 10px color-mix(in oklab, var(--color-shadow-glow) 40%, transparent);
    --shadow-text-glow-dark: 0 0 10px color-mix(in oklab, var(--color-text-accent-readable) 60%, transparent);

    /* Glows and Effects */
    --glow-primary: color-mix(in oklab, var(--color-shadow-emphasis) 50%, transparent);
    --glow-accent: color-mix(in oklab, var(--color-shadow-emphasis) 30%, transparent);
    --glow-text: 0 0 10px color-mix(in oklab, var(--color-shadow-emphasis) 50%, transparent);
    --glow-card: 0 0 24px 4px color-mix(in oklab, var(--color-shadow-emphasis) 18%, transparent);

    /* Radial Gradients */
    --radial-glow-primary: radial-gradient(circle, color-mix(in oklab, var(--color-shadow-emphasis) 80%, transparent), transparent);
    --radial-glow-secondary: radial-gradient(circle, color-mix(in oklab, var(--color-shadow-emphasis) 30%, transparent) 0%, transparent 70%);
    --radial-bg-hero: radial-gradient(circle at 20% 80%, color-mix(in oklab, var(--color-brand-primary) 2.5%, transparent) 0%, transparent 97.5%), radial-gradient(circle at 80% 40%, color-mix(in oklab, var(--color-brand-primary) 2.5%, transparent) 0%, transparent 97.5%);
    --radial-bg-overlay: radial-gradient(ellipse at center, transparent 0%, transparent 20%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.7) 100%);

    /* Status Colors */
    --status-error-bg: color-mix(in oklab, var(--color-feedback-error) 10%, transparent);
    --status-error-border: color-mix(in oklab, var(--color-feedback-error) 30%, transparent);
    --status-success-bg: color-mix(in oklab, var(--color-feedback-success) 10%, transparent);
    --status-success-border: color-mix(in oklab, var(--color-feedback-success) 30%, transparent);

    /* Button Colors */
    --btn-primary-bg: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-accent));
    --btn-primary-color: var(--text-dark);
    --btn-primary-shadow: var(--shadow-primary);
    --btn-primary-hover-bg: linear-gradient(135deg, var(--color-interactive-hover), var(--color-brand-accent));
    --btn-primary-hover-shadow: var(--shadow-primary-dark);
    /* Alternative high-contrast option: white text on darker gradient */
    --btn-primary-bg-alt: linear-gradient(135deg, var(--color-brand-tertiary), var(--color-brand-primary));
    --btn-primary-color-alt: var(--text-emphasis);
    --btn-secondary-bg: transparent;
    --btn-secondary-color: var(--text-primary);
    --btn-secondary-border: 2px solid var(--color-brand-primary);
    --btn-secondary-hover-bg: color-mix(in oklab, var(--color-interactive-hover) 10%, transparent);
    --btn-secondary-hover-border: 2px solid var(--color-interactive-hover);
    --btn-secondary-hover-shadow: var(--shadow-primary-light);

    /* ===== COMPONENT-SPECIFIC SEMANTIC VARIABLES ===== */
    /* Direct semantic mapping for common UI patterns */

    /* Navigation */
    --nav-bg: var(--color-surface-base);
    --nav-text: var(--color-text-emphasis);
    --nav-text-hover: var(--color-brand-primary);
    --nav-border: var(--color-border-subtle);
    --nav-shadow: var(--shadow-md);

    /* Cards and Containers */
    --card-bg: var(--color-surface-card);
    --card-bg-hover: var(--color-surface-hover);
    --card-border: var(--color-border-default);
    --card-border-hover: var(--color-border-emphasis);
    --card-shadow: var(--shadow-base);
    --card-shadow-hover: var(--shadow-md);
    --card-radius: var(--radius-lg);

    /* Forms and Inputs */
    --input-bg: var(--color-surface-input);
    --input-border: var(--color-border-default);
    --input-border-focus: var(--color-border-focus);
    --input-text: var(--color-text-default);
    --input-placeholder: var(--color-text-disabled);
    --input-radius: var(--radius-base);
    --input-shadow-focus: var(--shadow-input-focus);

    /* Links */
    --link-color: var(--color-brand-primary);
    --link-color-hover: var(--color-interactive-hover);
    --link-color-visited: var(--color-brand-primary);
    --link-decoration: none;
    --link-decoration-hover: underline;

    /* Icons */
    --icon-color-default: var(--color-text-subtle);
    --icon-color-interactive: var(--color-brand-primary);
    --icon-color-success: var(--color-feedback-success);
    --icon-color-error: var(--color-feedback-error);
    --icon-color-warning: var(--color-feedback-warning);
    --icon-color-info: var(--color-feedback-info);
    --icon-size-sm: 1rem;
    --icon-size-base: 1.25rem;
    --icon-size-lg: 1.5rem;
    --icon-size-xl: 2rem;

    /* Dividers and Separators */
    --divider-subtle: var(--color-border-subtle);
    --divider-default: var(--color-border-default);
    --divider-emphasis: var(--color-border-emphasis);
    --divider-vertical: 1px solid var(--color-border-default);
    --divider-horizontal: 1px solid var(--color-border-default);

    /* Overlays and Modals */
    --overlay-bg: color-mix(in oklab, var(--color-surface-base) 80%, transparent);
    --modal-bg: var(--color-surface-high);
    --modal-border: var(--color-border-emphasis);
    --modal-shadow: var(--shadow-2xl);
    --modal-radius: var(--radius-xl);

    /* Loading and Skeleton */
    --skeleton-bg: var(--color-surface-elevated);
    --skeleton-shimmer: color-mix(in oklab, var(--color-white) 5%, transparent);
    --skeleton-radius: var(--radius-base);

    /* Selection and Highlight */
    --selection-bg: color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
    --selection-text: var(--color-text-emphasis);

    /* Tooltips */
    --tooltip-bg: var(--color-surface-high);
    --tooltip-text: var(--color-text-default);
    --tooltip-border: var(--color-border-default);
    --tooltip-shadow: var(--shadow-lg);
    --tooltip-radius: var(--radius-md);

    /* Badges */
    --badge-bg-primary: var(--color-brand-primary);
    --badge-bg-secondary: var(--color-surface-elevated);
    --badge-bg-success: var(--color-feedback-success);
    --badge-bg-error: var(--color-feedback-error);
    --badge-bg-warning: var(--color-feedback-warning);
    --badge-text-primary: var(--color-text-inverse);
    --badge-text-secondary: var(--color-text-default);
    --badge-radius: var(--radius-full);

    /* Alerts */
    --alert-bg-info: color-mix(in oklab, var(--color-feedback-info) 10%, transparent);
    --alert-bg-success: color-mix(in oklab, var(--color-feedback-success) 10%, transparent);
    --alert-bg-warning: color-mix(in oklab, var(--color-feedback-warning) 10%, transparent);
    --alert-bg-error: color-mix(in oklab, var(--color-feedback-error) 10%, transparent);
    --alert-border-info: var(--color-feedback-info);
    --alert-border-success: var(--color-feedback-success);
    --alert-border-warning: var(--color-feedback-warning);
    --alert-border-error: var(--color-feedback-error);
    --alert-text-info: var(--color-feedback-info);
    --alert-text-success: var(--color-feedback-success);
    --alert-text-warning: var(--color-feedback-warning);
    --alert-text-error: var(--color-feedback-error);
    --alert-radius: var(--radius-lg);

    /* ===== CUBE ANIMATION COLORS ===== */
    /* Legacy support - from Background.svelte */
    --cube-color-r: 160;
    --cube-color-g: 160;
    --cube-color-b: 160;
    --cube-color-x: 192;
    --cube-color-y: 160;
    --cube-color-z: 160;
    --cube-opacity-base: 0.1;
    --cube-opacity-max: 0.15;
}

/* ===== UTILITY CLASSES ===== */
/* Common utility classes that use the design tokens */

/* Text utilities */
.text-emphasis {
    color: var(--color-text-emphasis);
}

.text-default {
    color: var(--color-text-default);
}

.text-subtle {
    color: var(--color-text-subtle);
}

.text-disabled {
    color: var(--color-text-disabled);
}

.text-brand {
    color: var(--color-brand-primary);
}

.text-success {
    color: var(--color-feedback-success);
}

.text-error {
    color: var(--color-feedback-error);
}

.text-warning {
    color: var(--color-feedback-warning);
}

.text-info {
    color: var(--color-feedback-info);
}

/* Background utilities */
.bg-surface-base {
    background-color: var(--color-surface-base);
}

.bg-surface-elevated {
    background-color: var(--color-surface-elevated);
}

.bg-surface-high {
    background-color: var(--color-surface-high);
}

.bg-surface-card {
    background-color: var(--color-surface-card);
}

.bg-brand-primary {
    background-color: var(--color-brand-primary);
}

.bg-brand-secondary {
    background-color: var(--color-brand-secondary);
}

.bg-success {
    background-color: var(--color-feedback-success);
}

.bg-error {
    background-color: var(--color-feedback-error);
}

.bg-warning {
    background-color: var(--color-feedback-warning);
}

.bg-info {
    background-color: var(--color-feedback-info);
}

/* Border utilities */
.border-subtle {
    border-color: var(--color-border-subtle);
}

.border-default {
    border-color: var(--color-border-default);
}

.border-emphasis {
    border-color: var(--color-border-emphasis);
}

.border-interactive {
    border-color: var(--color-border-interactive);
}

.border-focus {
    border-color: var(--color-border-focus);
}

.border-error {
    border-color: var(--color-border-error);
}

.border-success {
    border-color: var(--color-border-success);
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-base {
    box-shadow: var(--shadow-base);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

/* Spacing utilities */
.p-0 {
    padding: var(--space-0);
}

.p-1 {
    padding: var(--space-1);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

.p-4 {
    padding: var(--space-4);
}

.p-5 {
    padding: var(--space-5);
}

.p-6 {
    padding: var(--space-6);
}

.p-8 {
    padding: var(--space-8);
}

.m-0 {
    margin: var(--space-0);
}

.m-1 {
    margin: var(--space-1);
}

.m-2 {
    margin: var(--space-2);
}

.m-3 {
    margin: var(--space-3);
}

.m-4 {
    margin: var(--space-4);
}

.m-5 {
    margin: var(--space-5);
}

.m-6 {
    margin: var(--space-6);
}

.m-8 {
    margin: var(--space-8);
}

/* Border radius utilities */
.rounded-none {
    border-radius: var(--radius-none);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded {
    border-radius: var(--radius-base);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-3xl {
    border-radius: var(--radius-3xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* Typography utilities */
.font-primary {
    font-family: var(--font-family-primary);
}

.font-display {
    font-family: var(--font-family-display);
}

.font-mono {
    font-family: var(--font-family-mono);
}

.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-regular);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.text-4xl {
    font-size: var(--font-size-4xl);
}

.text-5xl {
    font-size: var(--font-size-5xl);
}

/* Transition utilities */
.transition-fast {
    transition: var(--transition-fast);
}

.transition-base {
    transition: var(--transition-base);
}

.transition-slow {
    transition: var(--transition-slow);
}

.transition-bounce {
    transition: var(--transition-bounce);
}

/* ===== LEGACY SUPPORT ===== */
/* Maintain compatibility with existing styles during migration */
.company-name-text {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-medium);
}