:root {
    /* Primary color */
    --primary-color: #2563eb;
    --primary-color-hover: #1d4ed8;
    --primary-color-ring: #3b82f6;

    /* Typography */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;
}

/* Dark mode overrides */
.array-dark-mode {
    --primary-color: #2563eb;
    --primary-color-hover: #1d4ed8;
    --primary-color-ring: #3b82f6;
}

/* Primary background color utilities */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-primary-hover:hover {
    background-color: var(--primary-color-hover) !important;
}

/* Primary text color utilities */
.text-primary {
    color: var(--primary-color) !important;
}

/* Primary border utilities */
.border-primary {
    border-color: var(--primary-color) !important;
}

/* Primary ring/focus utilities */
.ring-primary {
    --tw-ring-color: var(--primary-color-ring) !important;
}

/* Override Tailwind focus ring and border colors globally */
input:focus,
select:focus,
textarea:focus,
button:focus,
[class*="focus:ring"]:focus,
[class*="focus:border"]:focus {
    --tw-ring-color: var(--primary-color-ring) !important;
    border-color: var(--primary-color-ring) !important;
}

/* Radio/Checkbox accent color */
.accent-primary {
    accent-color: var(--primary-color) !important;
}

/* Apply base typography */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}