/* ==========================================================================
   BASE CSS - Core Styles and Variables (Rules #5, #10)
   CSS Custom Properties, Typography, Colors, Spacing, Animations
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Onest:wght@300;400;500;600;700&display=swap');

/* CSS Custom Properties (Variables) */
:root {
    /* ClickShot tool design: neutral ink palette + a single lime signal */
    --ink-950: #0A0A0A;
    --ink-900: #171717;
    --ink-800: #262626;
    --ink-700: #404040;
    --ink-600: #525252;
    --ink-500: #737373;
    --ink-400: #A3A3A3;
    --ink-300: #D4D4D4;
    --ink-200: #E5E5E5;
    --ink-150: #EDEDED;
    --ink-100: #F5F5F5;
    --ink-50: #FAFAFA;
    --white: #FFFFFF;
    --lime: #C5FF1A;
    --lime-600: #B7F500;
    --lime-400: #B5FF51;
    --lime-200: #E6FF99;
    --lime-100: #F1FFCC;
    --lime-glow: rgba(197, 255, 26, 0.55);
    --accent: #181B25;
    --accent-600: #232735;
    --accent-tint: #EEF0F5;

    /* Legacy aliases retained for existing components */
    --primary-color: var(--lime);
    --secondary-color: var(--accent);
    --text-color: var(--ink-900);
    --light-gray-color: var(--ink-50);
    --medium-gray-color: var(--ink-200);
    --dark-gray-color: var(--ink-500);
    --expired-color: #B42318;
    --expired-bg-color: #FFF5F3;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    
    /* Typography */
    --font-display: 'Geologica', 'Onest', system-ui, sans-serif;
    --font-body: 'Onest', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-family: var(--font-body);
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    
    /* Borders */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-xxl: 999px;
    
    /* Transitions */
    --transition-normal: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--ink-900);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.hidden { display: none !important; }

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn var(--transition-normal) ease-out;
}

.slide-up {
    animation: slideUp var(--transition-normal) ease-out;
}