/* Design system layer: tokens, base primitives, semantic components */

:root {
    /* Palette */
    --ds-color-text-primary: #121317;
    --ds-color-text-secondary: #45474d;
    --ds-color-text-muted: #6a6a71;
    --ds-color-text-inverse: #ffffff;
    --ds-color-bg-page: #ffffff;
    --ds-color-bg-surface: #ffffff;
    --ds-color-bg-surface-muted: #f8f9fc;
    --ds-color-bg-surface-tint: #eff2f7;
    --ds-color-bg-dark: #212226;
    --ds-color-border-subtle: #e6eaf0;
    --ds-color-border-soft: #e1e6ec;
    --ds-color-accent: #3279f9;
    --ds-color-accent-tint: #b7bfd9;
    --ds-color-accent-muted: #aab1cc;
    --ds-color-danger: #ff0000;

    /* Typography */
    --ds-font-body: "Google Sans Flex", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ds-font-display: "Google Sans Flex", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ds-font-symbol: "Google Symbols", system-ui, sans-serif;
    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 450;
    --ds-font-weight-strong: 500;
    --ds-type-display: clamp(2.5rem, 5vw, 5rem);
    --ds-type-heading: clamp(2rem, 3.2vw, 2.625rem);
    --ds-type-body-lg: clamp(1.125rem, 1.02rem + 0.25vw, 1.5rem);
    --ds-type-body: 1rem;
    --ds-type-nav: 1rem;
    --ds-type-button: 0.90625rem;
    --ds-type-label: 0.875rem;

    /* Spacing */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 16px;
    --ds-space-4: 24px;
    --ds-space-5: 32px;
    --ds-space-6: 48px;
    --ds-space-7: 64px;
    --ds-space-8: 72px;
    --ds-space-9: 88px;
    --ds-space-10: 120px;

    /* Radius */
    --ds-radius-none: 0px;
    --ds-radius-sm: 8px;
    --ds-radius-md: 16px;
    --ds-radius-pill: 9999px;

    /* Elevation */
    --ds-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --ds-shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.06);
    --ds-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
    --ds-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.15);
    --ds-focus-ring: 0 0 0 3px rgba(50, 121, 249, 0.15);
    --ds-focus-outline: 2px solid rgba(50, 121, 249, 0.35);

    /* Layout */
    --ds-container-max: 1280px;
    --ds-grid-gutter-desktop: 24px;
    --ds-grid-gutter-tablet: 16px;
    --ds-grid-gutter-mobile: 8px;
    --ds-section-padding-desktop: 120px;
    --ds-section-padding-tablet: 72px;
    --ds-section-padding-mobile: 48px;
}

html {
    color-scheme: light;
}

body {
    background: var(--ds-color-bg-page);
    color: var(--ds-color-text-primary);
    font-family: var(--ds-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ds-font-display);
    color: var(--ds-color-text-primary);
    font-weight: var(--ds-font-weight-medium);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h1 {
    font-size: var(--ds-type-display);
    line-height: 1.1;
}

h2 {
    font-size: var(--ds-type-heading);
    line-height: 1.1;
}

p,
li,
label,
input,
textarea,
select,
button {
    font-family: var(--ds-font-body);
}

p,
li {
    color: var(--ds-color-text-secondary);
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: 3px;
}

.ds-container {
    width: min(100%, var(--ds-container-max));
    margin-inline: auto;
}

.ds-surface {
    background: var(--ds-color-bg-surface);
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-subtle);
}

.ds-surface--muted {
    background: var(--ds-color-bg-surface-muted);
    border-color: var(--ds-color-border-soft);
}

.ds-surface--tint {
    background: var(--ds-color-bg-surface-tint);
    border-color: var(--ds-color-border-soft);
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--ds-color-border-soft);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-color-bg-surface-tint);
    color: var(--ds-color-text-primary);
    font-size: 12px;
    font-weight: var(--ds-font-weight-medium);
    line-height: 1.2;
}

.ds-badge--primary {
    border-color: var(--ds-color-accent);
    background: rgba(50, 121, 249, 0.15);
    color: var(--ds-color-accent);
}

.ds-badge--danger {
    border-color: var(--ds-color-danger);
    background: rgba(255, 0, 0, 0.15);
    color: var(--ds-color-danger);
}

.ds-link {
    color: var(--ds-color-accent);
    text-decoration: none;
}

.ds-link:hover {
    color: rgba(50, 121, 249, 0.8);
    text-decoration: underline;
}

.ds-link-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: var(--ds-radius-pill);
    background: rgba(183, 191, 217, 0.09);
    color: var(--ds-color-text-primary);
    font-size: var(--ds-type-button);
    font-weight: 430;
}

.ds-link-pill:hover {
    background: rgba(183, 191, 217, 0.18);
    text-decoration: none;
}

.ds-field,
input,
textarea,
select {
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-color-bg-surface);
    color: var(--ds-color-text-primary);
    font-size: 16px;
    line-height: 1.5;
}

.ds-field::placeholder,
input::placeholder,
textarea::placeholder {
    color: #aaa;
}

.ds-field:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--ds-color-accent);
    box-shadow: var(--ds-focus-ring);
    outline: none;
}

.ds-field[aria-invalid="true"],
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--ds-color-danger);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.15);
}

.ds-label {
    display: block;
    margin-bottom: 8px;
    color: var(--ds-color-text-primary);
    font-size: 14px;
    font-weight: var(--ds-font-weight-medium);
}

.ds-help {
    margin-top: 4px;
    color: var(--ds-color-text-muted);
    font-size: 12px;
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: var(--ds-radius-md);
    background: var(--ds-color-bg-surface);
    box-shadow: var(--ds-shadow-subtle);
}

.ds-table th,
.ds-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-color-border-soft);
    text-align: left;
}

.ds-table th {
    background: var(--ds-color-bg-surface-muted);
    color: var(--ds-color-text-primary);
    font-weight: var(--ds-font-weight-medium);
}

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

@media (max-width: 1024px) {
    :root {
        --ds-section-padding-desktop: var(--ds-section-padding-tablet);
    }
}

@media (max-width: 640px) {
    :root {
        --ds-section-padding-desktop: var(--ds-section-padding-mobile);
    }
}