/**
 * Doctor500 Design System Tokens
 * Version: 1.1.0
 * Based on: GitHub Primer Design System
 * 
 * This file contains all design tokens for the Doctor500 Design System.
 * Import this file to access the complete token system.
 * 
 * Usage:
 * @import 'design-system/tokens.css';
 * 
 * Then use tokens in your CSS:
 * .element { color: var(--fgColor-default); }
 */

/* ==========================================================================
   BASE TOKENS (Primitives)
   Do not use these directly - use functional tokens below
   ========================================================================== */

:root {
    /* Base Color Scale - Grays */
    --base-color-gray-0: #f0f6fc;
    --base-color-gray-1: #e6edf3;
    --base-color-gray-2: #d0d7de;
    --base-color-gray-3: #b1bac4;
    --base-color-gray-4: #8b949e;
    --base-color-gray-5: #6e7681;
    --base-color-gray-6: #484f58;
    --base-color-gray-7: #30363d;
    --base-color-gray-8: #21262d;
    --base-color-gray-9: #161b22;
    --base-color-gray-10: #0d1117;

    /* Base Color Scale - Blues */
    --base-color-blue-3: #60a5fa;
    --base-color-blue-5: #2f81f7;
    --base-color-blue-6: #1f6feb;
    --base-color-blue-8: #0969da;

    /* Base Size Scale (4px grid) */
    --base-size-0: 0;
    --base-size-4: 0.25rem;
    --base-size-8: 0.5rem;
    --base-size-12: 0.75rem;
    --base-size-16: 1rem;
    --base-size-20: 1.25rem;
    --base-size-24: 1.5rem;
    --base-size-32: 2rem;
    --base-size-40: 2.5rem;
    --base-size-48: 3rem;
    --base-size-64: 4rem;
    --base-size-80: 5rem;
    --base-size-96: 6rem;

    /* Font Families */
    --fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --fontStack-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
        'Liberation Mono', monospace;
}

/* ==========================================================================
   FUNCTIONAL TOKENS (Semantic) - USE THESE IN COMPONENTS
   ========================================================================== */

:root {
    /* Typography Tokens */
    --fontSize-00: 0.6875rem;
    /* 11px */
    --fontSize-0: 0.75rem;
    /* 12px */
    --fontSize-1: 0.875rem;
    /* 14px */
    --fontSize-2: 1rem;
    /* 16px */
    --fontSize-3: 1.125rem;
    /* 18px */
    --fontSize-4: 1.25rem;
    /* 20px */
    --fontSize-5: 1.5rem;
    /* 24px */
    --fontSize-6: 2rem;
    /* 32px */
    --fontSize-7: 2.5rem;
    /* 40px */
    --fontSize-8: 3rem;
    /* 48px */
    --fontSize-9: 4rem;
    /* 64px */

    --fontWeight-light: 300;
    --fontWeight-normal: 400;
    --fontWeight-medium: 500;
    --fontWeight-semibold: 600;
    --fontWeight-bold: 700;

    --lineHeight-condensed: 1.25;
    --lineHeight-default: 1.5;
    --lineHeight-relaxed: 1.75;

    /* Spacing Tokens */
    --space-0: 0;
    --space-1: var(--base-size-4);
    /* 4px */
    --space-2: var(--base-size-8);
    /* 8px */
    --space-3: var(--base-size-12);
    /* 12px */
    --space-4: var(--base-size-16);
    /* 16px */
    --space-5: var(--base-size-20);
    /* 20px */
    --space-6: var(--base-size-24);
    /* 24px */
    --space-8: var(--base-size-32);
    /* 32px */
    --space-10: var(--base-size-40);
    /* 40px */
    --space-12: var(--base-size-48);
    /* 48px */
    --space-16: var(--base-size-64);
    /* 64px */
    --space-20: var(--base-size-80);
    /* 80px */
    --space-24: var(--base-size-96);
    /* 96px */

    /* Semantic Spacing */
    --space-section-small: var(--space-16);
    --space-section-default: var(--space-20);
    --space-section-large: var(--space-24);

    /* Border Radius */
    --borderRadius-small: 0.375rem;
    /* 6px */
    --borderRadius-medium: 0.5rem;
    /* 8px */
    --borderRadius-large: 0.75rem;
    /* 12px */
    --borderRadius-xlarge: 1rem;
    /* 16px */
    --borderRadius-full: 9999px;

    /* Border Width */
    --borderWidth-thin: 1px;
    --borderWidth-thick: 2px;
    --borderWidth-thicker: 4px;

    /* Component Sizes */
    --size-button-small: 2rem;
    /* 32px */
    --size-button-medium: 2.5rem;
    /* 40px */
    --size-button-large: 3rem;
    /* 48px */

    --size-input-small: 2rem;
    --size-input-medium: 2.5rem;
    --size-input-large: 3rem;

    --size-icon-small: 1rem;
    --size-icon-medium: 1.25rem;
    --size-icon-large: 1.5rem;

    /* Layout Tokens */
    --container-narrow: 640px;
    --container-default: 1024px;
    --container-wide: 1280px;
    --container-full: 100%;

    /* Breakpoints (use in @media queries) */
    --breakpoint-mobile: 320px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-desktop-lg: 1280px;
    --breakpoint-desktop-xl: 1440px;

    /* Z-Index Scale */
    --zIndex-base: 0;
    --zIndex-dropdown: 1000;
    --zIndex-sticky: 1020;
    --zIndex-fixed: 1030;
    --zIndex-modal-backdrop: 1040;
    --zIndex-modal: 1050;
    --zIndex-popover: 1060;
    --zIndex-tooltip: 1070;

    /* Animation Tokens */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================================================
   DARK THEME (Primary/Default)
   ========================================================================== */

[data-color-mode="dark"][data-dark-theme="dark"],
[data-color-mode="auto"] {
    color-scheme: dark;

    /* Foreground Colors */
    --fgColor-default: #e6edf3;
    --fgColor-muted: #7d8590;
    --fgColor-subtle: #6e7681;
    --fgColor-onEmphasis: #ffffff;
    --fgColor-disabled: #484f58;

    /* Semantic Foreground */
    --fgColor-accent: #2f81f7;
    --fgColor-success: #3fb950;
    --fgColor-attention: #d29922;
    --fgColor-danger: #f85149;
    --fgColor-neutral: #8b949e;
    --fgColor-link: #2f81f7;
    --fgColor-sponsors: #db61a2;

    /* Background Colors */
    --bgColor-default: #0d1117;
    --bgColor-muted: #161b22;
    --bgColor-inset: #010409;
    --bgColor-emphasis: #6e40c9;
    --bgColor-inverse: #ffffff;
    --bgColor-disabled: #21262d;
    --bgColor-transparent: transparent;

    /* Semantic Backgrounds */
    --bgColor-accent-subtle: rgba(47, 129, 247, 0.15);
    --bgColor-accent-emphasis: #1f6feb;
    --bgColor-success-subtle: rgba(63, 185, 80, 0.15);
    --bgColor-success-emphasis: #238636;
    --bgColor-attention-subtle: rgba(210, 153, 34, 0.15);
    --bgColor-attention-emphasis: #9e6a03;
    --bgColor-danger-subtle: rgba(248, 81, 73, 0.15);
    --bgColor-danger-emphasis: #da3633;

    /* Border Colors */
    --borderColor-default: #30363d;
    --borderColor-muted: #21262d;
    --borderColor-emphasis: #6e7681;
    --borderColor-accent: #1f6feb;
    --borderColor-success: #238636;
    --borderColor-attention: #9e6a03;
    --borderColor-danger: #da3633;
    --borderColor-transparent: transparent;

    /* Shadows */
    --shadow-resting-small: 0 1px 0 rgba(1, 4, 9, 0.04);
    --shadow-resting-medium: 0 3px 6px rgba(1, 4, 9, 0.12);
    --shadow-floating-small: 0 6px 12px rgba(1, 4, 9, 0.12);
    --shadow-floating-medium: 0 8px 16px rgba(1, 4, 9, 0.16);
    --shadow-floating-large: 0 12px 28px rgba(1, 4, 9, 0.20);
    --shadow-inset: inset 0 1px 0 rgba(208, 215, 222, 0.2);

    /* Data Visualization Colors */
    --data-color-1: #2f81f7;
    --data-color-2: #3fb950;
    --data-color-3: #d29922;
    --data-color-4: #a371f7;
    --data-color-5: #f85149;
    --data-color-6: #79c0ff;
    --data-color-7: #56d364;
    --data-color-8: #e3b341;
    --data-color-9: #db61a2;
    --data-color-10: #6e40c9;

    /* Glassmorphism */
    --bgColor-glass: rgba(255, 255, 255, 0.05);
    --bgColor-glass-item: rgba(255, 255, 255, 0.05);
    --bgColor-glass-item-hover: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   LIGHT THEME (Secondary)
   ========================================================================== */

[data-color-mode="light"][data-light-theme="light"] {
    color-scheme: light;

    /* Foreground Colors */
    --fgColor-default: #24292f;
    --fgColor-muted: #57606a;
    --fgColor-subtle: #6e7681;
    --fgColor-onEmphasis: #ffffff;
    --fgColor-disabled: #8c959f;

    /* Semantic Foreground */
    --fgColor-accent: #0969da;
    --fgColor-success: #1a7f37;
    --fgColor-attention: #9a6700;
    --fgColor-danger: #cf222e;
    --fgColor-neutral: #6e7781;
    --fgColor-link: #0969da;
    --fgColor-sponsors: #bf3989;

    /* Background Colors */
    --bgColor-default: #ffffff;
    --bgColor-muted: #f6f8fa;
    --bgColor-inset: #ffffff;
    --bgColor-emphasis: #6639ba;
    --bgColor-inverse: #1b1f23;
    --bgColor-disabled: #eaeef2;
    --bgColor-transparent: transparent;

    /* Semantic Backgrounds */
    --bgColor-accent-subtle: #ddf4ff;
    --bgColor-accent-emphasis: #0969da;
    --bgColor-success-subtle: #dafbe1;
    --bgColor-success-emphasis: #1a7f37;
    --bgColor-attention-subtle: #fff8c5;
    --bgColor-attention-emphasis: #9a6700;
    --bgColor-danger-subtle: #ffebe9;
    --bgColor-danger-emphasis: #cf222e;

    /* Border Colors */
    --borderColor-default: #d0d7de;
    --borderColor-muted: #d8dee4;
    --borderColor-emphasis: #6e7781;
    --borderColor-accent: #0969da;
    --borderColor-success: #1a7f37;
    --borderColor-attention: #9a6700;
    --borderColor-danger: #cf222e;
    --borderColor-transparent: transparent;

    /* Shadows */
    --shadow-resting-small: 0 1px 0 rgba(31, 35, 40, 0.04);
    --shadow-resting-medium: 0 3px 6px rgba(140, 149, 159, 0.15);
    --shadow-floating-small: 0 6px 12px rgba(140, 149, 159, 0.15);
    --shadow-floating-medium: 0 8px 16px rgba(140, 149, 159, 0.20);
    --shadow-floating-large: 0 12px 28px rgba(140, 149, 159, 0.30);
    --shadow-inset: inset 0 1px 0 rgba(208, 215, 222, 0.2);

    /* Data Visualization Colors */
    --data-color-1: #0969da;
    --data-color-2: #1a7f37;
    --data-color-3: #9a6700;
    --data-color-4: #8250df;
    --data-color-5: #cf222e;
    --data-color-6: #218bff;
    --data-color-7: #2da44e;
    --data-color-8: #bf8700;
    --data-color-9: #bf3989;
    --data-color-10: #6639ba;

    /* Glassmorphism */
    --bgColor-glass: rgba(255, 255, 255, 0.75);
    --bgColor-glass-item: rgba(0, 0, 0, 0.05);
    --bgColor-glass-item-hover: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   HIGH CONTRAST THEMES
   ========================================================================== */

[data-color-mode="dark"][data-dark-theme="dark_high_contrast"] {
    color-scheme: dark;

    --fgColor-default: #ffffff;
    --bgColor-default: #0a0c10;
    --borderColor-default: #7a828e;
    --borderColor-muted: #525964;

    /* Enhanced contrast for all functional tokens */
    --bgColor-accent-emphasis: #409eff;
    --bgColor-success-emphasis: #4ac26b;
    --bgColor-danger-emphasis: #ff6a69;
}

[data-color-mode="light"][data-light-theme="light_high_contrast"] {
    color-scheme: light;

    --fgColor-default: #000000;
    --bgColor-default: #ffffff;
    --borderColor-default: #6e7781;
    --borderColor-muted: #8c959f;

    /* Enhanced contrast */
    --bgColor-accent-emphasis: #0550ae;
    --bgColor-success-emphasis: #116329;
    --bgColor-danger-emphasis: #a40e26;
}

/* ==========================================================================
   MEDIA QUERIES & ACCESSIBILITY
   ========================================================================== */

/* System dark mode preference when auto */
@media (prefers-color-scheme: dark) {
    [data-color-mode="auto"] {
        /* Inherits dark theme tokens defined above */
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0.01ms;
        --duration-normal: 0.01ms;
        --duration-slow: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast preference */
@media (prefers-contrast: high) {
    :root {
        --borderWidth-thin: 2px;
        --borderWidth-thick: 3px;
    }
}