/* Barmouj KeyVault design tokens. See docs/BRAND.md for the rationale behind each value. */

@font-face {
  font-family: "Geologica Text";
  src: url("../fonts/geologica-text.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Geologica Sharp";
  src: url("../fonts/geologica-sharp.woff") format("woff");
  font-weight: 500 800;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Metals and night: the palette of a key cabinet. */
  --ink-night: #0e1420;      /* page background, blue-steel rather than neutral black */
  --gunmetal: #161e2c;       /* panels */
  --gunmetal-2: #1d2738;     /* raised controls, hover */
  --gunmetal-3: #253045;     /* pressed, selected */
  --seam: #2a3547;           /* borders and dividers */
  --seam-strong: #3a475d;

  --fog: #e4e8ef;            /* primary text */
  --fog-muted: #9aa6b9;      /* secondary text */
  --fog-faint: #6a778d;      /* hints, placeholders */

  --brass: #d6a246;          /* primary action, focus, the clipboard fuse */
  --brass-bright: #e8bc66;
  --brass-deep: #a87a2a;
  --brass-ink: #1a1408;      /* text on brass */
  --brass-wash: rgba(214, 162, 70, 0.12);

  --verdigris: #5bb8a6;      /* secure / approved state, digits in secrets */
  --verdigris-wash: rgba(91, 184, 166, 0.12);
  --signal: #e06c5e;         /* danger, revoked, errors */
  --signal-wash: rgba(224, 108, 94, 0.12);

  /* Type. A modular scale of 1.2 on a 15px base, tuned for a dense tool. */
  --font-ui: "Geologica Text", system-ui, sans-serif;
  --font-brand: "Geologica Sharp", "Geologica Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-xs: 0.78rem;
  --text-sm: 0.87rem;
  --text-md: 0.94rem;
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.62rem;
  --text-3xl: 2.1rem;

  /* Space on a 4px grid. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* Radii follow hierarchy: panels are soft, controls tighter, chips round. */
  --r-panel: 14px;
  --r-control: 9px;
  --r-chip: 999px;

  --shadow-float: 0 12px 32px rgba(3, 6, 12, 0.55), 0 0 0 1px var(--seam);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sidebar-width: 236px;
  --detail-width: 440px;
}