/* ============================================
   Apikoo — SaaS Platform Styles
   ============================================ */

/* --- CSS Variables --- */
:root {
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --primary-light: #EEF2FF;
    --primary-50: #EEF2FF;
    --primary-100: #E0E7FF;
    --primary-600: #4F46E5;
    --primary-700: #4338CA;
    --primary-800: #3730A3;

    --bg: #F9FAFB;
    --bg-white: #FFFFFF;
    --sidebar-bg: #1E1B4B;
    --sidebar-text: #C7D2FE;
    --sidebar-active: #4F46E5;
    --sidebar-hover: rgba(255,255,255,0.08);

    --text: #111827;
    --text-secondary: #64748B;
    --text-muted: #6B7280;
    --text-light: #CBD5E1;

    --border: #E5E7EB;
    --border-light: #F3F4F6;
    --border-focus: #4F46E5;

    --success: #059669;
    --success-bg: #ECFDF5;
    --success-border: #A7F3D0;
    --error: #DC2626;
    --error-bg: #FEF2F2;
    --error-border: #FECACA;
    --warning: #D97706;
    --warning-bg: #FFFBEB;
    --warning-border: #FDE68A;
    --info: #2563EB;
    --info-bg: #EFF6FF;
    --info-border: #BFDBFE;

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

    --sidebar-width: 250px;
    --navbar-height: 60px;

    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

    --transition: 150ms ease;
}

/* --- Reset --- */
*, *::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-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    min-height: 100vh;
}

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

img, video {
    max-width: 100%;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}
h1 { font-size: 1.875rem; }
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 {
    color: var(--text-secondary);
    line-height: 1.625;
}

small, .text-sm {
    font-size: 0.875rem;
}
.text-xs {
    font-size: 0.75rem;
}
.text-lg {
    font-size: 1.125rem;
}
.text-xl {
    font-size: 1.25rem;
}
.text-2xl {
    font-size: 1.5rem;
}