/* ============================================
   ANSIN PRICE TRACKER - BASE STYLES
   Variables, Typography, Reset
   ============================================ */

:root {
    /* Color Palette - Minimal & Elegant */
    --color-primary: #1A1A1A;
    --color-primary-light: #333333;
    --color-primary-hover: #000000;
    
    /* Accent - Warm muted tone instead of bright teal */
    --color-accent: #8B7355;
    --color-accent-light: #A89078;
    --color-accent-hover: #6B5A45;
    
    /* Neutrals */
    --color-background: #F8F8F8;
    --color-surface: #FFFFFF;
    --color-surface-alt: #FAFAFA;
    --color-surface-hover: #F3F3F3;
    
    /* Borders */
    --color-border: #E0E0E0;
    --color-border-dark: #C0C0C0;
    --color-border-light: #EFEFEF;
    
    /* Text */
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-text-light: #CCCCCC;
    
    /* Status Colors */
    --color-success: #4A7C59;
    --color-warning: #C4913B;
    --color-danger: #B54545;
    --color-info: #5B7B9A;
    
    /* Ansin Brand Highlight */
    --color-ansin: #1A1A1A;
    --color-ansin-bg: #F5F5F5;
    --color-ansin-border: #1A1A1A;
    
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    
    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6, .header-title {
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}

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

p {
    margin: 0 0 1rem 0;
    color: var(--color-text-secondary);
}

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

a:hover {
    color: var(--color-primary-hover);
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

/* Selection */
::selection {
    background-color: var(--color-primary);
    color: white;
}

/* Focus States */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}