@font-face {
    font-family: "Google Sans";
    src: url("/assets/fonts/GoogleSans-Regular.ttf") format("truetype");
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: "Google Sans";
    src: url("/assets/fonts/GoogleSans-Bold.ttf") format("truetype");
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: "Inter Variable";
    src: url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-display: swap;
    font-weight: 100 900;
}

:root {
    --primary: #1f6fff;
    --primary-hover: #0d57d4;
    --primary-strong: #0f2b6d;
    --primary-light: rgba(31, 111, 255, 0.12);
    --blue-900: #0a1434;
    --blue-800: #0f2b6d;
    --blue-700: #184cbf;
    --blue-600: #1f6fff;
    --blue-500: #4994ff;
    --blue-400: #79b2ff;
    --blue-300: #b9d6ff;
    --blue-200: #dceaff;
    --blue-100: #edf4ff;
    --blue-sky: #4fc3f7;
    --grey-900: #102038;
    --grey-800: #21314f;
    --grey-700: #43516b;
    --grey-600: #63708a;
    --grey-500: #8b97ac;
    --grey-400: #bac3d2;
    --grey-300: #d8dfeb;
    --grey-200: #eaf0f8;
    --grey-100: #f7faff;
    --ink-900: #0d1b33;
    --success: #11845b;
    --success-bg: #e7faf2;
    --danger: #d64352;
    --danger-bg: #fff0f2;
    --warning: #c58100;
    --warning-bg: #fff6df;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-soft: rgba(255, 255, 255, 0.68);
    --border: rgba(16, 32, 56, 0.12);
    --border-strong: rgba(31, 111, 255, 0.24);
    --shadow-sm: 0 10px 24px rgba(16, 32, 56, 0.06);
    --shadow-md: 0 20px 48px rgba(16, 32, 56, 0.1);
    --shadow-lg: 0 28px 72px rgba(16, 32, 56, 0.14);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --font-display: "Google Sans", "Segoe UI", sans-serif;
    --font-main: "Inter Variable", "Segoe UI", sans-serif;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--grey-900);
    background:
        radial-gradient(circle at top left, rgba(31, 111, 255, 0.16), transparent 38%),
        radial-gradient(circle at bottom right, rgba(79, 195, 247, 0.14), transparent 34%),
        linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--ink-900);
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

p {
    margin: 0;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
}

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    background: rgba(31, 111, 255, 0.18);
}