@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --ink: #08151c;
    --ink-soft: #304651;
    --muted: #73858e;
    --muted-light: #a8b6bd;

    --primary: #0794a3;
    --primary-dark: #056b78;
    --primary-light: #22c9d3;
    --primary-bright: #57e2e7;
    --primary-wash: #e9fbfc;

    --accent: #f2a04a;
    --accent-dark: #d77c20;
    --accent-light: #ffc77d;
    --accent-wash: #fff5e8;

    --success: #17b47e;
    --danger: #e45b5b;

    --bg: #edf4f4;
    --paper: #f3f8f8;

    --surface: rgba(255,255,255,.78);
    --surface-solid: #fff;
    --surface-soft: rgba(248,252,252,.72);

    --border: rgba(63,103,113,.14);
    --border-hover: rgba(7,148,163,.32);
    --border-strong: rgba(63,103,113,.22);

    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 23px;
    --radius-xl: 30px;
    --radius-2xl: 38px;
    --radius-pill: 999px;

    --shadow-xs: 0 2px 8px rgba(7,21,29,.035);
    --shadow-sm: 0 8px 25px rgba(7,21,29,.055);
    --shadow-md: 0 16px 42px rgba(7,21,29,.085);
    --shadow-lg: 0 25px 70px rgba(7,21,29,.12);
    --shadow-xl: 0 40px 110px rgba(7,21,29,.18);

    --shadow-primary: 0 12px 30px rgba(7,148,163,.24);
    --shadow-accent: 0 12px 30px rgba(242,160,74,.25);

    --font-display: "Manrope","DM Sans",system-ui,sans-serif;
    --font-body: "DM Sans",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

    --ease: cubic-bezier(.22,1,.36,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    position: fixed;
    inset: 0;

    font-family: var(--font-body);
    color: var(--ink);

    background:
        radial-gradient(circle at 8% 5%,rgba(34,201,211,.11),transparent 25%),
        radial-gradient(circle at 94% 8%,rgba(242,160,74,.09),transparent 22%),
        radial-gradient(circle at 85% 92%,rgba(7,148,163,.08),transparent 30%),
        linear-gradient(135deg,#edf5f5,#f5f9f9);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(34,201,211,.28);
    outline-offset: 3px;
}

/* =========================================================
   APP
   ========================================================= */

.app {
    position: relative;

    display: flex;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background: radial-gradient(
        circle at 52% 42%,
        rgba(255,255,255,.78),
        transparent 48%
    );
}