/* Operations theme: Revolut's design language, with the CRM's blue in place of its cobalt.
 * The rulebook is DESIGN.md at the repo root; every value a screen uses comes from here.
 * Source: the design-md skill's `systems/revolut.md` (colour, type, shape, the two-mode canvas).
 * Typeface: Inter for everything, bundled here. Aeonik Pro (Revolut's display face) is
 * proprietary; the file names Inter Display as its substitute, which is Inter's own optical
 * size at large sizes, set at weight 500 with -1% tracking.
 */
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("inter-latin-variable.woff2") format("woff2"); }

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* light mode: where the work is done */
  --canvas: #ffffff;                /* the page: white, so every material on it reads as its own */
  --card: #ffffff;                  /* cards on the page */
  --soft: #f4f4f4;                  /* soft pills and tiles inside a card */
  --soft-hover: #eaeaec;
  --hairline: #e2e2e7;

  /* dark mode: the hero band at the top of a dashboard */
  --dark: #000000;
  --dark-card: #16181a;
  --dark-card-hover: #202326;
  --on-dark: #ffffff;
  --on-dark-mute: rgba(255, 255, 255, 0.72);
  --hairline-dark: rgba(255, 255, 255, 0.12);

  /* text */
  --ink: #191c1f;
  --mute: #505a63;
  --stone: #8d969e;
  --faint: #c9c9cd;

  /* the brand: the CRM's blue stands in for Revolut's cobalt violet */
  --primary: #155eef;
  --primary-bright: #2970ff;
  --primary-deep: #0040c1;
  --primary-tint: #e8effe;
  --on-primary: #ffffff;
  --focus: #155eef;

  /* Revolut's accent palette: status, figures and charts only, never a button */
  --teal: #00a87e;        --teal-tint: #e0f5ef;        --teal-text: #006400;
  --light-blue: #007bc2;  --light-blue-tint: #e0f0f8;  --light-blue-text: #005a8f;
  --orange: #ec7e00;      --orange-tint: #fdefdf;      --orange-text: #8a4a00;
  --danger: #e23b4a;      --danger-tint: #fce9eb;      --danger-text: #8b0000;
  --yellow: #b09000;      --yellow-tint: #f6f1dc;      --yellow-text: #6b5800;
  --brown: #936d62;       --brown-tint: #f2ebe9;       --brown-text: #6b4d44;
  --cobalt: #494fdf;      --cobalt-tint: #ebebfb;

  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;

  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  --h-pill: 48px; --h-pill-sm: 36px; --h-field: 56px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

body { font-family: var(--font-sans); font-size: 14px; line-height: 1.43; color: var(--ink); background: var(--canvas); font-optical-sizing: auto; }