@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Inter", arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;
  --radius-2xl: 0.75rem;
  --radius-pill: 1.5rem;
  --transition-fast: 0.2s ease;
  --transition-med: 0.3s ease;
  --box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  --tooltip-bg: #1a1a1a;
  --tooltip-text: #fff;
}

:root,
:root[data-theme="light"] {
  --primary: #5673ac;
  --primary-hover: #3b547c;
  --primary-rgb: 66, 133, 244;
  --brand-blue: #4285f4;
  --brand-yellow: #fbbc05;
  --danger: #ea4335;
  --warning: #c17d00;
  --success: #34a853;
  --bg: #f1f1f1;
  --bg-light: #fafafa;
  --bg-hover: #fafafa;
  --border: #c8d0da;
  --border-light: #dedede;
  --text-primary: #343536;
  --text-secondary: #4b5563;
  --text-link: #1a0dab;
  --text-link-visited: #681da8;
  --overlay-bg: rgba(0, 0, 0, 0.4);
  --white: #fff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #5673ac;
    --primary-hover: #3b547c;
    --warning: #fbbc05;
    --bg: #25272e;
    --bg-light: #303134;
    --bg-hover: #3c4043;
    --border: #5f6368;
    --border-light: #303134;
    --text-primary: #dddddd;
    --text-secondary: #9aa0a6;
    --text-link: #8ab4f8;
    --text-link-visited: #c58af9;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --white: #fff3f3;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary: #5673ac;
  --primary-hover: #3b547c;
  --warning: #fbbc05;
  --bg: #25272e;
  --bg-light: #303134;
  --bg-hover: #3c4043;
  --border: #5f6368;
  --border-light: #303134;
  --text-primary: #dddddd;
  --text-secondary: #9aa0a6;
  --text-link: #8ab4f8;
  --text-link-visited: #c58af9;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --white: #fff3f3;
  color-scheme: dark;
}

:root {
  --btn-secondary-hover: color-mix(in srgb, var(--text-primary) 26%, var(--bg));
}