/**
 * CSS Variables Contract
 *
 * All components MUST use these variables for consistency.
 * Do not hardcode colors, fonts, or spacing values.
 */

:root {
    /* =========================
       COLORS
       ========================= */
    --color-bg: #000000;
    --color-bg-elevated: #111111;
    --color-bg-hover: #1a1a1a;

    --color-text: #ffffff;
    --color-text-muted: #888888;
    --color-text-subtle: #666666;

    --color-accent: #ff4500;  /* orangered */
    --color-accent-hover: #ff6633;
    --color-accent-glow: rgba(255, 69, 0, 0.4);

    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 69, 0, 0.3);

    /* =========================
       TYPOGRAPHY
       ========================= */
    --font-primary: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Consolas', monospace;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --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: 2rem;     /* 32px */

    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* =========================
       SPACING
       ========================= */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* =========================
       TRANSITIONS
       ========================= */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* =========================
       SHADOWS
       ========================= */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--color-accent-glow);

    /* =========================
       BORDERS
       ========================= */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* =========================
       Z-INDEX LAYERS
       ========================= */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-animation: 50;
    --z-nav: 100;
    --z-modal: 200;
    --z-tooltip: 300;

    /* =========================
       BREAKPOINTS (for reference)
       ========================= */
    /* Mobile: < 768px */
    /* Tablet: 768px - 1024px */
    /* Desktop: > 1024px */
}

/* =========================
   RESET & BASE STYLES
   ========================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

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