:root {
        color-scheme: light;

        --ds-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

        --ds-color-canvas: #f7f9fa;
        --ds-color-surface: #ffffff;
        --ds-color-surface-soft: #eef4f6;
        --ds-color-surface-raised: #fbfcfd;
        --ds-color-border: #d9e3e8;
        --ds-color-border-strong: #b8c8d1;
        --ds-color-text: #121826;
        --ds-color-muted: #667085;
        --ds-color-primary: #0b5d51;
        --ds-color-primary-hover: #084a41;
        --ds-color-primary-soft: #e0f2ee;
        --ds-color-primary-ring: rgba(11, 93, 81, 0.28);
        --ds-color-accent: #2563eb;
        --ds-color-accent-soft: #e8efff;
        --ds-color-success: #16805a;
        --ds-color-success-soft: #e6f6ef;
        --ds-color-warning: #b45309;
        --ds-color-warning-soft: #fff4df;
        --ds-color-danger: #b42318;
        --ds-color-danger-soft: #ffebe9;

        --ds-radius-sm: 6px;
        --ds-radius-card: 8px;
        --ds-radius-control: 10px;
        --ds-radius-panel: 12px;
        --ds-radius-round: 999px;

        --ds-space-1: 4px;
        --ds-space-2: 8px;
        --ds-space-3: 12px;
        --ds-space-4: 16px;
        --ds-space-5: 20px;
        --ds-space-6: 24px;
        --ds-space-8: 32px;
        --ds-space-10: 40px;
        --ds-space-12: 48px;
        --ds-space-16: 64px;

        --ds-shadow-1: 0 8px 24px rgba(18, 24, 38, 0.08);
        --ds-shadow-2: 0 18px 48px rgba(18, 24, 38, 0.12);

        --bg: var(--ds-color-canvas);
        --surface: var(--ds-color-surface);
        --surface-soft: var(--ds-color-surface-soft);
        --text: var(--ds-color-text);
        --muted: var(--ds-color-muted);
        --primary: var(--ds-color-primary);
        --primary-dark: var(--ds-color-primary-hover);
        --primary-soft: var(--ds-color-primary-soft);
        --accent: var(--ds-color-accent);
        --border: var(--ds-color-border);
        --warning: var(--ds-color-warning);
        --danger: var(--ds-color-danger);
        --shadow: var(--ds-shadow-1);
    }

    html {
        text-size-adjust: 100%;
    }

    body {
        font-family: var(--ds-font-sans);
        background: var(--bg);
        color: var(--text);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    ::selection {
        background: var(--ds-color-primary-soft);
        color: var(--ds-color-primary-hover);
    }

    :focus-visible {
        outline: 3px solid var(--ds-color-primary-ring);
        outline-offset: 2px;
    }

    .card,
    .table-card,
    .section-card,
    .public-card,
    .stat-card,
    .login-card,
    .topbar {
        border-radius: var(--ds-radius-card);
        border-color: var(--ds-color-border);
        box-shadow: none;
    }

    .page-hero {
        border-radius: var(--ds-radius-panel);
        box-shadow: none;
    }

    .button-link,
    .button,
    .button-primary,
    .button-secondary,
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    .form-field input,
    .form-field select,
    .form-field textarea,
    .table-card form input,
    .table-card form select,
    .table-card form textarea,
    input,
    select,
    textarea {
        border-radius: var(--ds-radius-control);
    }

    .button-link,
    .button,
    .button-primary {
        background: var(--ds-color-primary);
        color: #ffffff;
    }

    .button-link:hover,
    .button:hover,
    .button-primary:hover {
        background: var(--ds-color-primary-hover);
    }

    .button-link.secondary,
    .button-secondary {
        background: var(--ds-color-surface);
        border: 1px solid var(--ds-color-border);
        color: var(--ds-color-text);
    }

    .badge,
    .status-pill,
    .pill {
        border-radius: var(--ds-radius-round);
    }

    .status-pill.success,
    .flash {
        background: var(--ds-color-success-soft);
        color: var(--ds-color-success);
    }

    .status-pill.warning {
        background: var(--ds-color-warning-soft);
        color: var(--ds-color-warning);
    }

    .status-pill.danger,
    .flash.error,
    .error,
    .error-box {
        background: var(--ds-color-danger-soft);
        color: var(--ds-color-danger);
    }

    th {
        color: var(--ds-color-muted);
        letter-spacing: 0.03em;
    }

    tbody tr:hover {
        background: rgba(37, 99, 235, 0.04);
    }