/**
 * LSOET Theme v2 - Clean Cartography Light Theme
 * Land Solutions of East Texas
 *
 * Design Language: Light, professional cartographic aesthetic
 * Typography: DM Serif Display (display) + Plus Jakarta Sans (body) + JetBrains Mono (data)
 * Atmosphere: Warm paper tones, teal accents, clean borders
 */

:root {
    /* ===================================
       BRAND LAYER (white-label ready)
       =================================== */
    --brand-accent: #1B6B6D;
    --brand-accent-light: #E8F4F4;
    --brand-accent-hover: #145252;
    --brand-logo-color: #1B6B6D;

    /* ===================================
       BACKGROUND HIERARCHY
       =================================== */
    --bg-base: #FAFAF8;
    --bg-surface: #FFFFFF;
    --bg-subtle: #F5F4F0;
    --bg-nav: #FFFFFF;

    /* Legacy background aliases */
    --bg-deep: var(--bg-base);
    --bg-card: var(--bg-surface);
    --bg-elevated: var(--bg-subtle);
    --background: var(--bg-base);
    --surface: var(--bg-surface);

    /* ===================================
       BORDERS
       =================================== */
    --border: #E8E6E1;
    --border-subtle: #F0EEE9;
    --border-light: var(--border-subtle);

    /* ===================================
       TEXT COLORS
       =================================== */
    --text-primary: #1A1A1A;
    --text-secondary: #5C5C5C;
    --text-muted: #8A8A8A;

    /* ===================================
       ACCENT COLORS
       =================================== */
    --accent: var(--brand-accent);
    --accent-light: var(--brand-accent-light);
    --accent-hover: var(--brand-accent-hover);

    /* ===================================
       PRIMARY BRAND (legacy - maps to accent)
       =================================== */
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --primary-light: var(--accent-light);
    --primary-dark: var(--accent-hover);

    /* ===================================
       SECONDARY (legacy)
       =================================== */
    --secondary: var(--accent);

    /* ===================================
       INTERACTIVE - BLUE
       =================================== */
    --interactive: #2563EB;
    --interactive-hover: #1D4ED8;

    /* ===================================
       STATUS COLORS
       =================================== */
    --success: #1E7A3E;
    --success-light: #E8F5EC;
    --warning: #92650D;
    --warning-light: #FFF8E7;
    --error: #C5303C;
    --error-light: #FDE8EA;
    --info: #2563EB;
    --info-light: #EFF6FF;

    /* ===================================
       SHADOWS - LIGHT MODE
       =================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 8px 30px rgba(27, 107, 109, 0.1);
    --shadow-glow: 0 0 20px rgba(27, 107, 109, 0.15);

    /* ===================================
       BORDER RADIUS SCALE
       =================================== */
    --radius-sm: 0.25rem;
    --radius: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* ===================================
       SPACING SCALE
       =================================== */
    /* v1 named scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* v2 numeric scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* ===================================
       TYPOGRAPHY
       =================================== */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

    /* Legacy font alias */
    --font-sans: var(--font-body);
    --font-serif: var(--font-display);

    /* Font sizes - EXACT SAME as v1 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ===================================
       TRANSITIONS & ANIMATIONS
       =================================== */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    --transition-base: all 0.2s ease;

    /* ===================================
       NAVIGATION
       =================================== */
    --nav-height: 56px;
    --nav-bg: rgba(255, 255, 255, 0.92);

    /* ===================================
       SLATE SCALE (light mode mapping)
       =================================== */
    --color-slate-950: #1A1A1A;
    --color-slate-900: #1A1A1A;
    --color-slate-800: #2C2C2C;
    --color-slate-700: #3D3D3D;
    --color-slate-600: #5C5C5C;
    --color-slate-500: #8A8A8A;
    --color-slate-400: #A3A3A3;
    --color-slate-300: #D4D4D4;
    --color-slate-200: #E8E6E1;
    --color-slate-100: #F5F4F0;
    --color-slate-50: #FAFAF8;

    /* ===================================
       COPPER SCALE (mapped to teal)
       =================================== */
    --color-copper-700: var(--accent-hover);
    --color-copper-600: var(--accent-hover);
    --color-copper-500: var(--accent);
    --color-copper-400: #2A9D8F;
    --color-copper-300: #5ABCB0;
    --color-copper-200: #A0DCD4;
    --color-copper-100: #D0F0EB;
    --color-copper-50: var(--accent-light);

    /* ===================================
       TEAL SCALE
       =================================== */
    --color-teal-600: #0F766E;
    --color-teal-500: #14B8A6;
    --color-teal-400: #2DD4BF;

    /* ===================================
       SUCCESS / ERROR SCALES
       =================================== */
    --color-emerald-600: #1E7A3E;
    --color-emerald-500: #22C55E;
    --color-red-600: #C5303C;
    --color-red-500: #EF4444;

    /* ===================================
       WARM NEUTRALS (light mode)
       =================================== */
    --color-cream: var(--bg-base);
    --color-paper: var(--bg-surface);
    --color-linen: var(--bg-subtle);

    /* ===================================
       LEGACY VARIABLE MAPPINGS
       =================================== */
    --primary-blue: var(--accent);
    --secondary-blue: var(--accent-hover);
    --accent-red: var(--error);
    --dark-gray: var(--text-primary);
    --text-gray: var(--text-secondary);
    --light-gray: var(--bg-surface);
    --gray: var(--bg-base);
    --white: #FFFFFF;
    --black: #000000;
    --color-primary: var(--accent);
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

.bg-primary { background-color: var(--primary); color: white; }
.bg-accent { background-color: var(--accent); color: white; }
.bg-surface { background-color: var(--surface); }
.bg-background { background-color: var(--background); }
.bg-success { background-color: var(--success-light); color: var(--success); }
.bg-warning { background-color: var(--warning-light); color: var(--warning); }
.bg-error { background-color: var(--error-light); color: var(--error); }
.bg-info { background-color: var(--info-light); color: var(--info); }

.border-primary { border-color: var(--primary); }
.border-accent { border-color: var(--accent); }
.border-default { border-color: var(--border); }

/* Button Styles */
.btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    font-weight: var(--font-semibold);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: var(--shadow-glow);
}

.btn-accent {
    background-color: var(--interactive);
    color: white;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.btn-accent:hover {
    background-color: var(--interactive-hover);
    box-shadow: var(--shadow-lg);
}

/* Card Component */
.card-themed {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: var(--space-lg);
    transition: var(--transition);
}

.card-themed:hover {
    border-color: rgba(27, 107, 109, 0.2);
    box-shadow: var(--shadow-hover);
}

/* Input Styling */
.input-themed {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: var(--transition);
}

.input-themed:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Professional Table Styles */
.table-professional {
    width: 100%;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.table-professional thead {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.table-professional th {
    padding: 1rem 1.5rem;
    font-weight: var(--font-semibold);
    text-align: left;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.table-professional td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.table-professional tbody tr:hover {
    background: var(--bg-subtle);
}

.table-professional tbody tr:last-child td {
    border-bottom: none;
}

/* Alert/Message Boxes - Light Mode */
.alert-professional {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin-bottom: var(--space-md);
}

.alert-professional.alert-info {
    background: var(--info-light);
    border-color: var(--info);
    color: #1D4ED8;
}

.alert-professional.alert-success {
    background: var(--success-light);
    border-color: var(--success);
    color: #166534;
}

.alert-professional.alert-warning {
    background: var(--warning-light);
    border-color: var(--warning);
    color: #854D0E;
}

.alert-professional.alert-error {
    background: var(--error-light);
    border-color: var(--error);
    color: #991B1B;
}

/* Badge Components */
.badge-professional {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

.badge-professional.badge-primary {
    background: var(--primary-light);
    color: var(--primary-hover);
}

.badge-professional.badge-accent {
    background: var(--accent-light);
    color: var(--accent-hover);
}

.badge-professional.badge-success {
    background: var(--success-light);
    color: var(--success);
}

.badge-professional.badge-warning {
    background: var(--warning-light);
    color: var(--warning);
}

/* Animation Classes */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.animate-fade {
    animation: fadeInProfessional 0.8s ease-in;
}

.lift-on-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lift-on-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}