@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 {
    /* Brand */
    --primary:        #1f6fff;
    --primary-hover:  #0d57d4;
    --primary-strong: #0f2b6d;
    --primary-light:  rgba(31, 111, 255, 0.12);

    /* Blue ramp */
    --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 ramp */
    --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;

    /* Semantic */
    --ink-900:    #0d1b33;
    --success:    #11845b;
    --success-bg: #e7faf2;
    --danger:     #d64352;
    --danger-bg:  #fff0f2;
    --warning:    #c58100;
    --warning-bg: #fff6df;

    /* Surfaces & borders */
    --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);

    /* Elevation */
    --shadow-sm: 0 6px 14px rgba(16, 32, 56, 0.05);
    --shadow-md: 0 12px 28px rgba(16, 32, 56, 0.09);
    --shadow-lg: 0 18px 44px rgba(16, 32, 56, 0.11);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* Typography */
    --font-display: "Google Sans", "Segoe UI", sans-serif;
    --font-main:    "Inter Variable", "Segoe UI", sans-serif;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  10px;
    --space-4:  12px;
    --space-5:  15px;
    --space-6:  18px;
    --space-8:  24px;
    --space-10: 30px;

    /* Motion */
    --transition-fast: 0.16s ease;
    --transition-base: 0.24s ease;

    /* Focus ring — use on any interactive element */
    --focus-ring: 0 0 0 4px rgba(31, 111, 255, 0.14);

    /* Body background (declared as a variable so dark mode can override it) */
    --body-bg:
        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%);
}

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

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.5;
    color: var(--grey-900);
    /* BUG FIX: hardcoded hex gradient values bypassed the token system and
       could never be overridden by the dark-theme token cascade.
       The background is now expressed as a CSS variable so theme-dark.css
       can replace it cleanly by setting --body-bg on html[data-theme="dark"]. */
    background: var(--body-bg,
        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;
    line-height: 1.15;
}

p {
    margin: 0;
}

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

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

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

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