/*
 * Admin console redesign: design tokens.
 *
 * Source: the "Components and tokens" artboard on the design canvas
 * (docs/redesign/HANDOFF.md). Loaded by shared :: head-block before app.css
 * and before app.css. Fonts are self-hosted, see fonts.css.
 *
 * Rule for status colours: always pair an ink with its tint, and always
 * show a word next to the colour. Never rely on colour alone.
 */

:root {
  /* Ink and surfaces */
  --color-navy: #0A1A2A;          /* sidebar, code blocks, dialogs backdrop base */
  --color-ink: #0F1E2E;           /* body text, strong buttons */
  --color-ink-secondary: #33414F; /* secondary text */
  --color-ink-muted: #4D5B6B;     /* labels, helper text (4.5:1 on white and page) */
  --color-icon-quiet: #6B7785;    /* quiet icon buttons, disabled text */
  --color-card: #FFFFFF;
  --color-page: #F5F6F8;
  --color-well: #E7EAEE;          /* segmented control track, neutral pills */
  --color-row-head: #FAFBFC;      /* table header, card footers */
  --color-border: #E3E6EB;
  --color-border-row: #EEF0F3;    /* row dividers */
  --color-border-control: #C5CCD5;/* inputs and selects */
  --color-border-button: #D5DAE1; /* secondary buttons */

  /* Sidebar (on navy) */
  --color-sidebar-text: #C5D0DC;
  --color-sidebar-heading: #8FA0B3;
  --color-sidebar-active-bg: #1D3550;
  --color-sidebar-control-bg: #12263A;
  --color-sidebar-control-border: #2A3B4E;

  /* Accent */
  --color-action: #1A56E8;        /* primary buttons, links */
  --color-action-hover: #0F3FB8;
  --color-action-ink: #123A9C;    /* text on the blue tint */
  --color-action-tint: #E8EFFE;   /* active filters, selected rows */

  /* Status: ink on tint */
  --color-good-ink: #0D6B46;
  --color-good-tint: #E3F3EC;
  --color-danger-ink: #A02E0C;
  --color-danger-tint: #FDEBE5;
  --color-danger-border: #EFC2B4;
  --color-warn-ink: #7A4300;
  --color-warn-tint: #FFF1DC;
  --color-warn-banner-ink: #5C3A00;
  --color-warn-banner-bg: #FFF6E5;
  --color-warn-banner-border: #EBCB8B;
  --color-neutral-ink: #33414F;
  --color-neutral-tint: #EEF0F3;

  /* Type */
  --font-body: Inter, system-ui, sans-serif;
  --font-heading: "Space Grotesk", Inter, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* IDs, codes, queries, log attributes */

  --text-page-title: 600 28px/1.15 var(--font-heading);  /* letter-spacing: -0.01em */
  --text-section-title: 600 17px/1.3 var(--font-heading);
  --text-card-title: 600 16px/1.3 var(--font-heading);
  --text-body: 400 14px/1.45 var(--font-body);
  --text-small: 400 13px/1.45 var(--font-body);
  --text-label: 500 13px/1.45 var(--font-body);          /* form labels */
  --text-caps: 600 11px/1.45 var(--font-body);           /* uppercase, letter-spacing: 0.06em */
  --text-table-head: 600 12px/1.45 var(--font-body);
  --text-mono: 400 13px/1.45 var(--font-mono);
  --text-mono-small: 400 12px/1.45 var(--font-mono);

  /* Shape */
  --radius-tag: 6px;
  --radius-icon-button: 7px;
  --radius-control: 9px;   /* inputs, selects, buttons, segmented track */
  --radius-card: 12px;
  --radius-dialog: 14px;
  --radius-pill: 999px;    /* status badges */

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Sizes */
  --sidebar-width: 248px;
  --control-height: 40px;        /* inputs, selects, form buttons */
  --control-height-small: 34px;  /* segmented buttons, inline actions */
  --table-head-height: 40px;
  --table-row-height: 54px;
  --content-max-width: 1120px;   /* detail and record pages */
  --form-max-width: 820px;       /* single-column forms */

  /* Elevation */
  --shadow-segment: 0 1px 2px rgba(15, 30, 46, 0.12);
  --shadow-dialog: 0 24px 60px rgba(5, 15, 26, 0.45);
  --overlay: rgba(10, 26, 42, 0.6);
}