/* bgroup design tokens. Colour scheme and type aligned with bgroup.io on 4 October 2026 (navy and teal, Inter, Space Grotesk).
   The token names are historical and stay as they were so that every stylesheet keeps working: "forest" is now the brand navy
   and "amber" is now the single teal accent. Fonts: Inter 400, 500, 600 and Space Grotesk 500, 700 (SIL OFL 1.1), served from
   /fonts/ as woff2 (each page declares its @font-face rules; the files and licence are in apps/api/public/fonts). */

:root {
  /* Brand colours (fixed) */
  --bgroup-forest: #0b2e4f;          /* brand navy: headlines, primary buttons, dark surfaces, logo */
  --bgroup-green: #1f7a4d;           /* positive status */
  --bgroup-amber: #0e7c86;           /* the single accent: teal. Text on white 4.9:1; use accent-strong on tints */
  --bgroup-ink: #0f1b2d;             /* body text */
  --bgroup-pale: #e6eef7;            /* pale panels (same blue-grey tint as forest-tint); text on navy */
  --bgroup-white: #ffffff;

  /* Derived neutrals and accent shades */
  --bgroup-slate: #33455a;           /* secondary text */
  --bgroup-mist: #5f6f80;            /* placeholder and planned items */
  --bgroup-line: #dde4ec;            /* hairlines and card borders */
  --bgroup-line-strong: #c3cfdc;     /* control borders, hover borders */
  --bgroup-surface: #f4f7fa;         /* page background behind white cards */
  --bgroup-forest-deep: #071f36;     /* deepest navy: the signature card, hover on navy */
  --bgroup-forest-tint: #e6eef7;     /* selected rows, hover tint on white; body text on the deep card */
  --bgroup-on-deep: #c9d7e5;         /* secondary text on navy (11:1 on navy deep) */
  --bgroup-accent-strong: #0a5f67;   /* teal for small text on tinted grounds, hover on teal */
  --bgroup-accent-soft: #e3f3f4;     /* pale teal ground: badges, the glow behind the grid */
  --bgroup-accent-bright: #5ad0d8;   /* teal for decoration on navy only. Never used for text on a light ground */

  /* Status (always paired with a text label and a shape). Each has an ink colour, a soft ground and a line. */
  --bgroup-status-cleared: #1f7a4d;       /* circle */
  --bgroup-ok-soft: #e6f4ec;              /* cleared ground */
  --bgroup-status-cleared-bg: var(--bgroup-ok-soft);
  --bgroup-status-cleared-line: #b7dfc8;
  --bgroup-status-review: #7a5200;        /* diamond; warm so it stays distinct from the teal accent */
  --bgroup-status-review-bg: #fff7e6;
  --bgroup-status-review-line: #e6b85c;
  --bgroup-status-blocked: #b42318;       /* square, functional red */
  --bgroup-status-blocked-bg: #fdecea;
  --bgroup-status-blocked-line: #f0b4ad;
  --bgroup-status-planned: #5f6f80;       /* hollow circle */
  --bgroup-status-mock: #33455a;          /* hollow dashed square */

  /* Type */
  --bgroup-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bgroup-font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bgroup-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bgroup-weight-regular: 400;
  --bgroup-weight-medium: 500;
  --bgroup-weight-semibold: 600;
  --bgroup-weight-display: 700;

  --bgroup-text-display: 700 56px/60px var(--bgroup-font-display);
  --bgroup-text-h1: 700 40px/44px var(--bgroup-font-display);
  --bgroup-text-h2: 700 28px/34px var(--bgroup-font-display);
  --bgroup-text-h3: 700 20px/28px var(--bgroup-font-display);
  --bgroup-text-body-l: 400 18px/28px var(--bgroup-font-sans);
  --bgroup-text-body: 400 16px/24px var(--bgroup-font-sans);
  --bgroup-text-small: 400 14px/20px var(--bgroup-font-sans);
  --bgroup-text-caption: 500 12px/16px var(--bgroup-font-sans);
  --bgroup-text-mono: 400 13px/20px var(--bgroup-font-mono);
  --bgroup-tracking-display: -0.02em;   /* the display face, wherever it is used */
  --bgroup-tracking-h1: -0.02em;
  --bgroup-tracking-h2: -0.02em;
  --bgroup-tracking-eyebrow: 0.1em;

  /* Space, radius, border, shadow */
  --bgroup-space-1: 4px;
  --bgroup-space-2: 8px;
  --bgroup-space-3: 12px;
  --bgroup-space-4: 16px;
  --bgroup-space-5: 24px;
  --bgroup-space-6: 32px;
  --bgroup-space-7: 48px;
  --bgroup-space-8: 64px;
  --bgroup-radius-pill: 999px;       /* buttons, tags, status labels */
  --bgroup-radius-panel: 12px;       /* panels and the login card */
  --bgroup-radius-card: 12px;        /* cards, tables, tiles, results */
  --bgroup-radius-control: 8px;      /* inputs, notices, small boxes */
  --bgroup-border-hairline: 1px solid var(--bgroup-line);
  --bgroup-focus-ring: 0 0 0 3px rgba(14, 124, 134, 0.35);   /* the halo; teal on white is 1.6:1 alone, so a solid teal edge always goes with it */
  --bgroup-focus-line: 2px solid var(--bgroup-amber);
  --bgroup-shadow-card: 0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px -12px rgba(15, 27, 45, 0.18);
  --bgroup-shadow-overlay: 0 2px 4px rgba(15, 27, 45, 0.06), 0 16px 36px -10px rgba(15, 27, 45, 0.32);

  /* The faint grid behind the login page and the intro: 1px lines every 48px at 4.5% navy (as on the bgroup.io hero). */
  --bgroup-grid: linear-gradient(rgba(11, 46, 79, 0.045) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(11, 46, 79, 0.045) 1px, transparent 1px) 0 0 / 48px 48px;
}

/* Base */
.bgroup-body { font: var(--bgroup-text-body); color: var(--bgroup-ink); background: var(--bgroup-white); -webkit-font-smoothing: antialiased; }
.bgroup-body a { color: var(--bgroup-amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.bgroup-body a:hover { color: var(--bgroup-forest); }
/* The bgroup.io hero ground: the faint grid over a pale teal glow at the top right and a near-white wash. */
.bgroup-grid { background: var(--bgroup-grid), radial-gradient(1200px 520px at 85% -10%, var(--bgroup-accent-soft) 0%, rgba(227, 243, 244, 0) 60%), linear-gradient(180deg, #f7fafc 0%, #ffffff 100%); background-color: var(--bgroup-surface); }

/* Eyebrow: a small uppercase teal label above a heading or a group. Teal on white is 4.9:1; use .bgroup-eyebrow-tint on tinted grounds. */
.bgroup-eyebrow { font: 600 12px/16px var(--bgroup-font-sans); letter-spacing: var(--bgroup-tracking-eyebrow); text-transform: uppercase; color: var(--bgroup-amber); }
.bgroup-eyebrow-tint { color: var(--bgroup-accent-strong); }
/* Small mono label in teal: ids and versions. */
.bgroup-id { font-family: var(--bgroup-font-mono); color: var(--bgroup-amber); }

/* Buttons: pills. Primary navy, secondary outlined, quiet text. */
.bgroup-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--bgroup-radius-pill); font: 600 15px/20px var(--bgroup-font-sans); cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.bgroup-btn-primary { background: var(--bgroup-forest); border-color: var(--bgroup-forest); color: var(--bgroup-white); }
.bgroup-btn-primary:hover { background: var(--bgroup-forest-deep); border-color: var(--bgroup-forest-deep); }
.bgroup-btn-secondary { background: var(--bgroup-white); color: var(--bgroup-forest); border-color: var(--bgroup-line-strong); }
.bgroup-btn-secondary:hover { background: var(--bgroup-surface); border-color: var(--bgroup-forest); }
.bgroup-btn-quiet { background: transparent; color: var(--bgroup-forest); }
.bgroup-btn-quiet:hover { background: var(--bgroup-forest-tint); }
.bgroup-btn:focus-visible { outline: var(--bgroup-focus-line); outline-offset: 2px; box-shadow: var(--bgroup-focus-ring); }
.bgroup-btn[disabled] { background: var(--bgroup-surface); color: var(--bgroup-slate); border-color: transparent; cursor: not-allowed; }

/* Inputs */
.bgroup-label { display: block; font: 500 14px/20px var(--bgroup-font-sans); color: var(--bgroup-ink); margin-bottom: 6px; }
.bgroup-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--bgroup-line-strong); border-radius: var(--bgroup-radius-control); font: var(--bgroup-text-body); color: var(--bgroup-ink); background: var(--bgroup-white); }
.bgroup-input::placeholder { color: var(--bgroup-mist); }
.bgroup-input:focus { outline: none; border-color: var(--bgroup-amber); box-shadow: var(--bgroup-focus-ring); }
.bgroup-input[aria-invalid="true"] { border-color: var(--bgroup-status-blocked); }
.bgroup-hint { font: var(--bgroup-text-small); color: var(--bgroup-slate); margin-top: 6px; }
.bgroup-error { font: 500 14px/20px var(--bgroup-font-sans); color: var(--bgroup-status-blocked); margin-top: 6px; }

/* Cards and tables */
.bgroup-card { background: var(--bgroup-white); border: var(--bgroup-border-hairline); border-radius: var(--bgroup-radius-card); padding: 20px; box-shadow: var(--bgroup-shadow-card); }
.bgroup-table { width: 100%; border-collapse: collapse; font: var(--bgroup-text-small); }
.bgroup-table th { text-align: left; font: 600 12px/16px var(--bgroup-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bgroup-slate); padding: 10px 12px; border-bottom: 1px solid var(--bgroup-line-strong); }
.bgroup-table td { padding: 12px; border-bottom: 1px solid var(--bgroup-line); vertical-align: top; }
.bgroup-table tr:hover td { background: var(--bgroup-surface); }
.bgroup-mono { font: var(--bgroup-text-mono); color: var(--bgroup-slate); }

/* Status labels: text plus shape, never colour alone. A pill with a soft ground, as on bgroup.io. */
.bgroup-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--bgroup-radius-pill); font: 600 12px/16px var(--bgroup-font-sans); color: var(--bgroup-slate); background: var(--bgroup-surface); box-shadow: inset 0 0 0 1px var(--bgroup-line-strong); }
.bgroup-status::before { content: ""; width: 8px; height: 8px; flex: none; }
.bgroup-status-cleared { color: var(--bgroup-status-cleared); background: var(--bgroup-status-cleared-bg); box-shadow: inset 0 0 0 1px var(--bgroup-status-cleared-line); }
.bgroup-status-review { color: var(--bgroup-status-review); background: var(--bgroup-status-review-bg); box-shadow: inset 0 0 0 1px var(--bgroup-status-review-line); }
.bgroup-status-blocked { color: var(--bgroup-status-blocked); background: var(--bgroup-status-blocked-bg); box-shadow: inset 0 0 0 1px var(--bgroup-status-blocked-line); }
.bgroup-status-planned { color: var(--bgroup-slate); }
.bgroup-status-mock { color: var(--bgroup-status-mock); background: var(--bgroup-white); box-shadow: none; border: 1px dashed var(--bgroup-status-mock); }
.bgroup-status-cleared::before { background: var(--bgroup-status-cleared); border-radius: 50%; }
.bgroup-status-review::before { background: var(--bgroup-status-review); transform: rotate(45deg) scale(0.9); }
.bgroup-status-blocked::before { background: var(--bgroup-status-blocked); }
.bgroup-status-planned::before { border: 2px solid var(--bgroup-status-planned); border-radius: 50%; box-sizing: border-box; }
.bgroup-status-mock::before { border: 1.5px dashed var(--bgroup-status-mock); box-sizing: border-box; }

/* Alerts */
.bgroup-alert { display: grid; grid-template-columns: 4px 1fr; gap: 12px; border: var(--bgroup-border-hairline); border-radius: var(--bgroup-radius-control); padding: 12px 14px; font: var(--bgroup-text-small); color: var(--bgroup-ink); background: var(--bgroup-white); }
.bgroup-alert::before { content: ""; border-radius: 2px; background: var(--bgroup-amber); }
.bgroup-alert-review::before { background: var(--bgroup-status-review-line); }
.bgroup-alert-blocked::before { background: var(--bgroup-status-blocked); }
.bgroup-alert-cleared::before { background: var(--bgroup-status-cleared); }
.bgroup-alert strong { font-weight: 600; }

/* The dark panel: the one deep navy surface, used on the login page (the bgroup.io "One verification, end to end" card).
   White text, hairlines at 12% white, small mono labels in bright teal. Bright teal is for navy only: never on a light ground. */
.panel-dark { background: var(--bgroup-forest-deep); color: var(--bgroup-white); border-color: rgba(255, 255, 255, 0.12); }
.panel-dark h2, .panel-dark h3 { color: var(--bgroup-white); }
.panel-dark .rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.panel-dark .label { font-family: var(--bgroup-font-mono); color: var(--bgroup-accent-bright); }
.panel-dark .quiet { color: var(--bgroup-on-deep); }

/* Navigation */
.bgroup-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--bgroup-forest); color: var(--bgroup-pale); min-height: 100%; }
.bgroup-nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--bgroup-radius-control); color: var(--bgroup-pale); text-decoration: none; font: 500 14px/20px var(--bgroup-font-sans); }
.bgroup-nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--bgroup-white); }
.bgroup-nav a[aria-current="page"] { background: var(--bgroup-white); color: var(--bgroup-forest); }