/**
 * Proto-OKN Design System
 * CSS Custom Properties and Design Tokens
 */

:root {
    /* ===== Color Palette ===== */
    --color-primary-purple: #6B4C9A;
    --color-light-purple: #9659FF;
    --color-purple-gradient-start: #6B4C9A;
    --color-purple-gradient-end: #8B6CB8;
    --color-border-purple: #D4C5E8;
    --color-background-light: #FAFAFA;
    --color-background-white: #FFFFFF;
    --color-background-gray: #F5F5F5;
    --color-background-code: #F5F5F5;
    --color-text-dark: #333333;
    --color-text-gray: #666666;
    --color-text-light: #999999;
    --color-border-light: #E0E0E0;
    --color-border-medium: #D0D0D0;
    --color-hover-background: #F5F0FA;

    /* ===== Typography ===== */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-family-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

    /* Font Sizes */
    --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 Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

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

    /* ===== Spacing Scale ===== */
    --spacing-xs: 0.25rem;        /* 4px */
    --spacing-sm: 0.5rem;         /* 8px */
    --spacing-md: 0.75rem;        /* 12px */
    --spacing-base: 1rem;         /* 16px */
    --spacing-lg: 1.25rem;        /* 20px */
    --spacing-xl: 1.5rem;         /* 24px */
    --spacing-2xl: 2rem;          /* 32px */
    --spacing-3xl: 2.5rem;        /* 40px */
    --spacing-4xl: 3rem;          /* 48px */

    /* ===== Border Radius ===== */
    --radius-sm: 0.25rem;         /* 4px */
    --radius-base: 0.5rem;        /* 8px */
    --radius-md: 0.625rem;        /* 10px */
    --radius-lg: 0.75rem;         /* 12px */
    --radius-xl: 1.25rem;         /* 20px */
    --radius-pill: 624.9375rem;   /* 9999px - pill shape */
    --radius-circle: 50%;

    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ===== Z-Index Scale ===== */
    --z-index-base: 1;
    --z-index-dropdown: 1000;
    --z-index-modal: 9999;
    --z-index-overlay: 9998;
    --z-index-hamburger: 10000;
    --z-index-tooltip: 10001;

    /* ===== Transitions ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all 0.2s ease;

    /* ===== Component Specific ===== */
    --button-padding-sm: 0.5rem 1rem;
    --button-padding-base: 0.625rem 1.25rem;
    --button-padding-lg: 0.875rem 2rem;

    --input-padding: 0.75rem 1rem;
    --input-border-width: 2px;

    --modal-max-width: 600px;
    --modal-padding: 2rem;

    --header-height: auto;
    --header-padding: 1rem 1.25rem;
}

/* ===== Dark Mode Support (Future) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode colors would go here */
        /* Currently not implemented per design specs */
    }
}

/* ===== Utility Classes ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}