/* Claude AI Style Base CSS - Typography, Colors, Reset */

/* Import Inter font for like typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Claude AI Color System */
:root {
/* Purple Modern - Creative & AI-focused */
--orange-50: #faf5ff;
--orange-100: #f3e8ff;
--orange-200: #e9d5ff;
--orange-300: #d8b4fe;
--orange-400: #c084fc;
--orange-500: #a855f7;
--orange-600: #9333ea;
--orange-700: #7c3aed;
--orange-800: #6d28d9;
--orange-900: #5b21b6;

    /* Neutral grays - Warmer tones to complement purple */
--gray-25: #fdfcfe;     /* Slightly purple-tinted white */
--gray-50: #faf9fb;     /* Very subtle purple warmth */
--gray-100: #f4f3f6;    /* Light gray with purple undertone */
--gray-200: #e7e5ea;    /* Soft purple-gray */
--gray-300: #d1cdd6;    /* Medium purple-gray */
--gray-400: #9d97a3;    /* Balanced purple-gray */
--gray-500: #6b6570;    /* Deep purple-gray */
--gray-600: #524c57;    /* Dark purple-gray */
--gray-700: #3e3742;    /* Very dark purple-gray */
--gray-800: #2a252e;    /* Almost black with purple */
--gray-900: #1a171c;    /* Rich dark purple-black */

/* Semantic colors - Harmonious with purple brand */
--success-50: #f2fdf4;   /* Keep green for success */
--success-100: #dcfce7;  /* Keep green for success */
--success-500: #10b981;  /* Emerald green (better with purple) */
--success-600: #059669;  /* Darker emerald */
--success-700: #047857;  /* Deep emerald */

--error-50: #fef2f3;     /* Slightly warmer red */
--error-100: #fee2e4;    /* Warmer light red */
--error-500: #f43f5e;    /* Rose red (complements purple) */
--error-600: #e11d48;    /* Darker rose */
--error-700: #be123c;    /* Deep rose */

--warning-50: #fffcf0;   /* Warm amber background */
--warning-100: #fef3c7;  /* Keep amber */
--warning-500: #f59e0b;  /* Keep amber (good with purple) */
--warning-600: #d97706;  /* Keep amber */

--blue-50: #f0f4ff;      /* Cooler blue-purple */
--blue-100: #e0e9ff;     /* Light blue-purple */
--blue-500: #6366f1;     /* Indigo (harmonizes with purple) */
--blue-600: #4f46e5;     /* Darker indigo */
--blue-700: #4338ca;     /* Deep indigo */

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Font sizes - Claude's refined scale */
    --text-xxs: 0.625rem;    /* 10px */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */

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

    /* Line heights - Claude's comfortable reading */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Spacing scale - Claude's harmonious rhythm */
    --space-0: 0;
    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */

    /* Border radius - Claude's soft, friendly curves */
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* Shadows - Claude's subtle depth */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Transitions - Claude's smooth animations */
    --transition-fast: 150ms ease-out;
    --transition-normal: 200ms ease-out;
    --transition-slow: 300ms ease-out;

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
}

/* Modern CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--gray-900);
    background-color: var(--gray-25);
    min-height: 100vh;
    scroll-behavior: smooth;
}

/* Claude Theme Body */
.theme {
    background: linear-gradient(135deg, var(--orange-50) 0%, var(--gray-50) 100%);
    min-height: 100vh;
}

/* Remove default button styles */
button {
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    outline: none;
}

/* Remove default input styles */
input,
textarea,
select {
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

/* Remove default list styles */
ul,
ol {
    list-style: none;
}

/* Remove default anchor styles */
a {
    color: inherit;
    text-decoration: none;
}

/* Image defaults */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--gray-900);
    margin: 0;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
}

h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
}

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
}

h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
}

h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

p {
    margin: 0;
    line-height: var(--leading-relaxed);
    color: var(--gray-700);
}

/* Focus states - Claude's accessible focus rings */
:focus-visible {
    outline: 2px solid var(--orange-500);
    outline-offset: 2px;
}

/* Selection styles */
::selection {
    background-color: var(--orange-100);
    color: var(--gray-900);
}

/* Scrollbar styling - Claude's subtle scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
    transition: background var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: high) {
    :root {
        --gray-100: #e5e5e5;
        --gray-200: #d0d0d0;
        --gray-300: #b0b0b0;
        --orange-500: #cc5500;
    }
}

/* Dark mode support (for future enhancement) */
@media (prefers-color-scheme: dark) {
    .theme {
        background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    }
    
    :root {
        --gray-25: var(--gray-900);
        --gray-50: var(--gray-800);
        --gray-100: var(--gray-700);
        --gray-200: var(--gray-600);
        --gray-900: var(--gray-25);
        --gray-800: var(--gray-100);
        --gray-700: var(--gray-200);
    }
}

/* Print styles */
@media print {
    .theme {
        background: white !important;
        color: black !important;
    }
    
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .header,
    .header-nav,
    .header-right,
    .modal-overlay,
    .toast-container {
        display: none !important;
    }
    
    .dashboard-container {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* High performance optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Container queries support (progressive enhancement) */
@supports (container-type: inline-size) {
    .container {
        container-type: inline-size;
    }
}

/* Custom properties for dynamic theming */
.theme[data-theme="warm"] {
    --primary: var(--orange-500);
    --primary-hover: var(--orange-600);
    --primary-light: var(--orange-50);
}

.theme[data-theme="cool"] {
    --primary: var(--blue-500);
    --primary-hover: var(--blue-600);
    --primary-light: var(--blue-50);
}