/**
 * Base CSS - Resets, variables, typography, and element defaults
 */

:root {
    /* Brand colors */
    --brand: #6b5cff;
    --brand-600: #5a4fe0;
    --brand-700: #4a42bf;
    --brand-50: #f0f0ff;
    --brand-100: #e0e0ff;

    /* Surface colors */
    --bg: #ffffff;
    --paper: #f8fafc;
    --ink: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;

    /* Accent colors */
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Spacing scale (4px base) */
    --s-1: 0.25rem;
    /* 4px */
    --s-2: 0.5rem;
    /* 8px */
    --s-3: 0.75rem;
    /* 12px */
    --s-4: 1rem;
    /* 16px */
    --s-5: 1.5rem;
    /* 24px */
    --s-6: 2rem;
    /* 32px */
    --s-7: 3rem;
    /* 48px */
    --s-8: 4rem;
    /* 64px */
    --s-9: 6rem;
    /* 96px */
    --s-10: 8rem;
    /* 128px */
    --s-11: 10rem;
    /* 160px */
    --s-12: 12rem;
    /* 192px */

    /* Typography scale */
    --fs-12: 0.75rem;
    /* 12px */
    --fs-14: 0.875rem;
    /* 14px */
    --fs-16: 1rem;
    /* 16px */
    --fs-18: 1.125rem;
    /* 18px */
    --fs-20: 1.25rem;
    /* 20px */
    --fs-24: 1.5rem;
    /* 24px */
    --fs-30: 1.875rem;
    /* 30px */
    --fs-36: 2.25rem;
    /* 36px */
    --fs-48: 3rem;
    /* 48px */

    /* Line heights */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* Border radius */
    --r-1: 0.25rem;
    --r-2: 0.5rem;
    --r-3: 0.75rem;
    --r-4: 1rem;
    --r-round: 9999px;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-3: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-4: 0 20px 25px rgba(0, 0, 0, 0.1);

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

/* Reset and base styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'InterVariable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    color: var(--ink);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--ink);
}

h1 {
    font-size: var(--fs-36);
}

h2 {
    font-size: var(--fs-30);
}

h3 {
    font-size: var(--fs-24);
}

h4 {
    font-size: var(--fs-20);
}

h5 {
    font-size: var(--fs-18);
}

h6 {
    font-size: var(--fs-16);
}

p {
    margin-bottom: var(--s-4);
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-600);
    text-decoration: underline;
}

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

/* Lists */
ul,
ol {
    margin-bottom: var(--s-4);
    padding-left: var(--s-5);
}

li {
    margin-bottom: var(--s-2);
}

/* Code */
code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.875em;
    background-color: var(--paper);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-1);
    border: 1px solid var(--border);
}

pre {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--fs-14);
    background-color: var(--paper);
    padding: var(--s-4);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    overflow-x: auto;
    margin-bottom: var(--s-4);
}

pre code {
    background: none;
    padding: 0;
    border: none;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--s-4);
}

th,
td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    font-weight: 600;
    background-color: var(--paper);
}

/* Blockquotes */
blockquote {
    margin: var(--s-5) 0;
    padding: var(--s-4) var(--s-5);
    border-left: 4px solid var(--brand);
    background-color: var(--paper);
    font-style: italic;
}

/* Focus styles */
:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--brand-50);
    color: var(--ink);
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--brand);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: var(--z-tooltip);
}

.skip-link:focus {
    top: 6px;
}