/* OutSync web design tokens, from the brand kit (brand/kit-v1/tokens.css). Shared by the public
   site and the staff panel. The gradient is for brand moments: a headline, the hero, one action. */

@font-face {
  font-family: "Chakra Petch";
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/chakra-petch-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/chakra-petch-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

:root {
  --ink: #07080d;
  --ink-2: #0b0e17;
  --surface: #111625;
  --surface-2: #161c2e;
  --border: #232a3d;
  --border-strong: #343d56;
  --text: #f3f5fc;
  --text-2: #c9cfe0;
  --muted: #8f99b3;
  --faint: #5c6680;

  --cyan: #22d8e2;
  --blue: #315bff;
  --violet: #8b45ff;
  --orchid: #c333ff;
  --cyan-rgb: 34, 216, 226;
  --blue-rgb: 49, 91, 255;
  --violet-rgb: 139, 69, 255;
  --orchid-rgb: 195, 51, 255;

  --ok: #3ddc97;
  --warn: #f0b03f;
  --danger: #f2546b;

  --gradient: linear-gradient(115deg, var(--cyan), var(--blue) 45%, var(--violet) 80%, var(--orchid));
  --gradient-h: linear-gradient(90deg, var(--cyan), var(--blue) 45%, var(--violet) 80%, var(--orchid));

  --font-display: "Chakra Petch", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cut: 14px;
}