@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600 700;
    src: url("/fonts/OpenSans-Semibold.ttf") format("truetype");
}

:root {
    --background: #f7f8fa;
    --surface: #ffffff;
    --surface-muted: #f2f5f8;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --input-border: #cbd5e1;
    --control-border: #7c899b;
    --accent: #c8f431;
    --accent-text: #0f172a;
    --primary-action: #0f172a;
    --primary-action-text: #ffffff;
    --focus: #0284c7;
    --warning-surface: #fff4d6;
    --warning-text: #92400e;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
}

:root[data-theme="dark"] {
    --background: #0b1020;
    --surface: #121a2a;
    --surface-muted: #182033;
    --text-primary: #f7f9fc;
    --text-secondary: #aab5d6;
    --input-border: #2a3550;
    --control-border: #67748b;
    --accent: #c8f431;
    --accent-text: #0f172a;
    --primary-action: #7cff6b;
    --primary-action-text: #0f172a;
    --focus: #38bdf8;
    --warning-surface: #2a2215;
    --warning-text: #ffdda6;
}