@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lato-regular.ttf") format("truetype");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url("../fonts/lato-bold.ttf") format("truetype");
}

:root {
    --tt-color-brand-500: #0049f5;
    --tt-color-brand-600: #0033ab;
    --tt-color-brand-700: #002478;
    --tt-color-brand-soft: #eaf4ff;
    --tt-color-ink: #172235;
    --tt-color-muted: #68758a;
    --tt-color-line: #e6eaf0;
    --tt-color-surface: #ffffff;
    --tt-color-canvas: #f5f7fa;
    --tt-color-success: #18805b;
    --tt-color-success-soft: #edf8f3;
    --tt-color-info-600: #0033ab;
    --tt-color-info-soft: #eaf4ff;
    --tt-color-warning: #c77816;
    --tt-color-danger-600: #b42318;
    --tt-color-danger-soft: #fff1f0;
    --tt-font-brand: Lato, "Segoe UI", Arial, sans-serif;
    --tt-font-ui: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --tt-font-sans: var(--tt-font-ui);
    --tt-space-1: 0.25rem;
    --tt-space-2: 0.5rem;
    --tt-space-3: 0.75rem;
    --tt-space-4: 1rem;
    --tt-space-6: 1.5rem;
    --tt-radius-sm: 0.5rem;
    --tt-radius-md: 0.75rem;
    --tt-radius-lg: 1rem;
    --tt-shadow-card: 0 2px 6px rgb(29 49 77 / 3%);
    --tt-focus-ring: 0 0 0 3px rgb(24 168 216 / 28%);
}