:root {
    /* Airtable Design Tokens */
    --theme-primary-text: #181d26;
    --theme-primary-accent: #1b61c9;
    --theme-surface: #ffffff;
    --theme-surface-light: #f8fafc;
    --theme-border: #e0e2e6;
    --theme-text-weak: rgba(4, 14, 32, 0.69);
    --theme-success: #006400;
    --theme-shadow-blue: rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset;
    --theme-shadow-soft: rgba(15,48,106,0.05) 0px 0px 20px;
    
    /* Typography */
    --font-family: 'Haas', -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Haas Groot Disp', 'Haas', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--theme-surface);
    color: var(--theme-primary-text);
    line-height: 1.35;
    letter-spacing: 0.18px;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--theme-primary-text);
    letter-spacing: normal;
}

h1 { font-size: 48px; font-weight: 400; line-height: 1.15; }
h2 { font-size: 40px; font-weight: 400; line-height: 1.25; }
h3 { font-size: 32px; font-weight: 400; line-height: 1.15; }
h4 { font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: 0.12px; }

a {
    color: var(--theme-primary-accent);
    text-decoration: none;
    transition: opacity 0.2s;
}

a:hover {
    opacity: 0.8;
}

/* Components */

.btn, .button, button {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary, .button-primary {
    background-color: var(--theme-primary-accent);
    color: white;
}

.btn-secondary, .button-secondary {
    background-color: white;
    color: var(--theme-primary-text);
    border: 1px solid var(--theme-border);
}

.card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    box-shadow: var(--theme-shadow-soft);
    padding: 24px;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--theme-shadow-blue);
}

input, select, textarea {
    font-family: var(--font-family);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 12px;
    color: var(--theme-primary-text);
}

.text-weak {
    color: var(--theme-text-weak);
}

.success-text {
    color: var(--theme-success);
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 48px 0;
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    color: var(--theme-text-weak);
    font-weight: 500;
    padding: 12px;
    border-bottom: 1px solid var(--theme-border);
}

td {
    padding: 12px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-primary-text);
}

/* Navigation */
nav {
    background-color: #0d0526;
    border-bottom: 1px solid var(--theme-border);
    padding: 16px 0;
}