/* Design tokens: the ONLY place colours, type, radii, spacing and shadows
   are set. The same language as the marketing site (site/DESIGN.md section 0,
   "The Volary"): near-black and bone, plus four colours that each carry one
   meaning, everywhere in the app:

     teal    allowed, working, passed, OK
     orange  stopped, blocked, failed, error
     yellow  primary actions, the gate, and "waiting / not yet"
     violet  the signed record

   Components live in app.css and use only these names. The volary canvas
   (assets/js/volary.js) reads its colours from here too. */

@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* The site's files are subsets of the glyphs the site uses. These complete
   Latin cuts of the same typefaces (SIL OFL 1.1) fill any glyph the subsets
   lack, so app text never drops to a system font mid-word. */
@font-face { font-family: "Geist Latin"; src: url("/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono Latin"; src: url("/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* the brand palette (identical to the site) */
  --ink: #070708;
  --ink-2: #0E0E11;
  --ink-3: #16161A;
  --bone: #F4F1EA;
  --teal: #2EF2CF;
  --orange: #FF6B35;
  --yellow: #F5E94A;
  --brand-mark: #2EF2CF;    /* the bird logo, teal as on the site (site v19) */
  --violet: #8C7BFF;

  /* surfaces and lines */
  --bg: var(--ink);
  --surface: var(--ink-2);
  --surface-2: var(--ink-3);
  --line: #24242A;
  --line-strong: #36363E;
  --line-hover: #55555F;
  --scrim: rgba(7, 7, 8, .78);
  --bar: rgba(14, 14, 17, .78);

  /* text */
  --text: var(--bone);
  --text-strong: #FFFFFF;
  --text-2: #B5B1AA;
  --text-3: #8E8A84;
  --text-placeholder: #5E5B57;

  /* meaning: each colour has exactly one job */
  --ok: var(--teal);        /* allowed, working, passed checks */
  --bad: var(--orange);     /* stopped at the gate, failed, error */
  --wait: var(--yellow);    /* waiting for a person, in progress, not yet */
  --action: var(--yellow);  /* primary buttons and the gate */
  --record: var(--violet);  /* the signed record */

  /* ink to use ON a coloured fill */
  --on-action: #111111;
  --on-ok: #05221D;
  --on-record: #0B0820;
  --on-bone: #070708;

  /* faint washes of the meaning colours (borders, glows) */
  --ok-line: rgba(46, 242, 207, .32);
  --ok-wash: rgba(46, 242, 207, .08);
  --bad-line: rgba(255, 107, 53, .4);
  --bad-wash: rgba(255, 107, 53, .08);
  --wait-line: rgba(245, 233, 74, .36);
  --wait-wash: rgba(245, 233, 74, .08);
  --record-line: rgba(140, 123, 255, .42);
  --record-wash: rgba(140, 123, 255, .1);
  --bone-wash: rgba(244, 241, 234, .06);
  --focus-ring: rgba(244, 241, 234, .14);
  --selection: rgba(245, 233, 74, .28);

  /* type: Geist for UI, Geist Mono for labels, Instrument Serif italic accents */
  --sans: "Geist", "Geist Latin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Latin", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-caption: 12.5px;
  --fs-label: 11px;
  --fs-title: 15.5px;
  --fs-h1: 46px;
  --fs-h1-sm: 32px;
  --fs-hero: clamp(2.9rem, 1.4rem + 3.6vw, 5rem);
  --fs-figure: 32px;
  --fw-heading: 700;
  --tracking-heading: -0.05em;
  --tracking-label: 0.12em;

  /* shape and space (card radii as on the site) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --pad: 40px;
  --wrap: 1240px;
  --bar-h: 64px;
  --shadow-pop: 0 18px 48px -12px rgba(0, 0, 0, .7);
  --shadow-action: 0 8px 30px -10px rgba(245, 233, 74, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* the select arrow, drawn in --text-2 */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B1AA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}