/* ARAYOLA (PVT) LTD — website design tokens.
   Palette and body font follow http://p-bot.ru/en/ (source CSS in reference/p-bot/).
   Company-name lockup and logo follow arayola-base.css. */

@font-face {
  font-family: "Fira Mono";
  src: url("../fonts/fira-mono/FiraMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("../fonts/fira-mono/FiraMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("../fonts/fira-mono/FiraMono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BankGothic";
  src: url("../fonts/BNKGOTHL.TTF") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --font-body: "Fira Mono", monospace;
  --font-brand: "BankGothic", "Bank Gothic LT BT", "Fira Mono", monospace;

  --bg: #20252d;            /* page background */
  --bg-raised: #262c37;     /* banners, cards */
  --bg-teal-deep: #1b393d;  /* dropdown panels */
  --border-teal: #40595d;
  --text: #ffffff;
  --text-muted: #4f555f;
  --line: #555555;
  --line-input: #999999;
  --btn-neutral: #4f555f;
  --btn-neutral-hover: #686e79;
  --btn-outline: #727883;

  --teal: #00bfaa;          /* primary: links, buttons, menus, company name */
  --teal-hover: #00d7c0;
  --red: #e30f31;           /* alert / negative; pairs with the logo hexagon */
  --red-deep: #560008;
  --pink-hover: #c71585;
}

html, body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

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

.button {
  background-color: var(--teal); color: var(--text);
  font-family: var(--font-body); border: 0; cursor: pointer;
}
.button:hover { background-color: var(--teal-hover); }
.button-cancel { background-color: var(--btn-neutral); color: var(--text); }
.button-cancel:hover { background-color: var(--btn-neutral-hover); }

.muted { color: var(--text-muted); }

.co { display: flex; align-items: center; gap: 8px; }
.co-name {
  color: var(--teal);
  font-family: var(--font-brand);
  font-weight: 700;
  font-synthesis: weight;
  letter-spacing: 0.06em;
  white-space: nowrap;
  -webkit-text-stroke: 0.35px var(--teal);
  paint-order: stroke fill;
}
.co-logo { height: 36px; width: auto; display: block; }