@font-face {
  font-family: "Funnel Sans";
  src: url("fonts/funnel-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Display";
  src: url("fonts/funnel-display.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --font: "Funnel Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --bg: #f3f7fa;
  --surface: #ffffff;
  --raised: #ffffff;
  --sidebar: #e6eef4;
  --hover: rgb(10 28 45 / 0.06);
  --selected: rgb(26 94 162 / 0.11);
  --text: #0a1c2d;
  --text-2: #4b6476;
  --line: rgb(10 28 45 / 0.1);
  --accent: #1a5ea2;
  --accent-hover: #164f88;
  --on-accent: #ffffff;
  --danger: #b4233c;
  --focus: rgb(26 94 162 / 0.35);
  --shadow: 0 1px 2px rgb(10 28 45 / 0.05), 0 8px 24px rgb(10 28 45 / 0.06);
  --shadow-pop: 0 2px 6px rgb(10 28 45 / 0.08), 0 16px 40px rgb(10 28 45 / 0.14);

  --stage-new: #405768;
  --stage-contacted: #185693;
  --stage-replied: #0b6155;
  --stage-meeting: #463ec2;
  --stage-proposal: #8b4107;
  --stage-won: #235f26;
  --stage-lost: #953122;

  --font-display: "Funnel Display", var(--font);
  --sun-top: #ffb46a;
  --sun-low: #ff6b3d;
  --sun: linear-gradient(180deg, var(--sun-top), var(--sun-low));
  --on-sun: #071321;
  --sun-glow: 0 8px 22px -12px rgb(255 107 61 / 0.7);
  --sea-top: #63c2f2;
  --sea-low: #2f7fd3;

  --google-fill: #ffffff;
  --google-fill-hover: #f2f2f2;
  --google-border: #747775;
  --google-text: #1f1f1f;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 20px;

  --text-s: 13px;
  --text-m: 15px;
  --text-l: 17px;
  --title: 28px;

  --sidebar-width: 232px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1c2d;
    --surface: #10283f;
    --raised: #12364f;
    --sidebar: #050e18;
    --hover: rgb(99 194 242 / 0.08);
    --selected: rgb(99 194 242 / 0.14);
    --text: #eef4f7;
    --text-2: #a3b8c7;
    --line: rgb(99 194 242 / 0.13);
    --accent: #63c2f2;
    --accent-hover: #86d0f5;
    --on-accent: #071321;
    --danger: #ff7a8a;
    --focus: rgb(99 194 242 / 0.45);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.25);
    --shadow-pop: 0 2px 6px rgb(0 0 0 / 0.4), 0 18px 44px rgb(0 0 0 / 0.5);
    --stage-new: #a3b8c7;
    --stage-contacted: #63c2f2;
    --stage-replied: #5fd4c4;
    --stage-meeting: #a9a8ff;
    --stage-proposal: #ffb46a;
    --stage-won: #7ed492;
    --stage-lost: #ff8a7a;
    --google-fill: #131314;
    --google-fill-hover: #1f1f20;
    --google-border: #8e918f;
    --google-text: #e3e3e3;
  }
}