/*
  CoreAlign design tokens.
  Source: docs/design-system/design-principles.md and docs/design-system/component-catalogue.md,
  distilled from analysis of the product owner's legacy system (see those docs for provenance
  of each value). Every colour, font, spacing, radius, and shadow used elsewhere in the design
  system must reference one of these custom properties rather than a literal value.
*/

:root {
  /* Colour: brand */
  --color-primary: #1B3281;
  --color-primary-dark: #14265F;
  --color-accent: #4A90E2;
  --color-accent-dark: #35729B;

  /* Colour: semantic / status */
  --color-success-bg: #DFF0D8;
  --color-success-text: #3C763D;
  --color-danger: #B91C1C;
  --color-danger-dark: #8E1616;
  --color-warning-bg: #FCF3CF;
  --color-warning-text: #7D6608;

  /* Colour: neutrals */
  --color-text: #333333;
  --color-text-muted: #6B6B6B;
  --color-surface: #FFFFFF;
  --color-bg: #F5F5F5;
  --color-bg-subtle: #F9F9F9;
  --color-border: #CCCCCC;

  /* UI foundation pass: measured legacy row-hover highlight (light blue), used by the new
     .record-table label/value component - see docs/design-system/design-principles.md. */
  --color-row-hover: #E8F0FE;

  /* Typography
     Typeface pass: Arial (the legacy system's default, and literally the "no typeface was
     chosen" system font) replaced with IBM Plex, self-hosted - see
     src/CoreAlign.Web/wwwroot/lib/ibm-plex/ (SIL OFL 1.1, LICENSE.txt included) and
     docs/design-system/design-principles.md. Every fallback stack still ends in the system sans
     so the app stays legible even if a font file ever fails to load. */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
  --font-condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-base: var(--font-sans);

  /* Type scale - a handful of intentional steps carrying hierarchy through type (size + weight),
     not boxes; table/body text density is unchanged from the UI density pass. */
  --font-size-title: 24px;       /* page title */
  --font-size-heading: 18px;     /* section heading */
  --font-size-subheading: 16px;  /* subheading, new */
  --font-size-body: 15px;        /* body text */
  --font-size-small: 13px;       /* small/meta text, table text (unchanged) */

  --font-weight-normal: 400;
  --font-weight-medium: 500;     /* new - subheadings */
  --font-weight-semibold: 600;   /* new - section headings */
  --font-weight-bold: 700;       /* page titles, strong emphasis */

  --line-height-base: 1.5;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Shape */
  /* UI pass 2: halved from 8px/12px - the product owner reported the interface as still "bubble
     style and big" after the density pass; a smaller radius reads as a flatter, denser
     application surface rather than a soft consumer/marketing one. See REPORT.md. */
  --radius: 4px;
  --radius-lg: 6px;
  --radius-circle: 999px;

  /* UI foundation pass (density): measured from the legacy system's actual CSS, which CoreAlign's
     original tokens ran materially looser than - see docs/design-system/design-principles.md
     ("Density (UI foundation pass)") and REPORT.md for the full old -> new rationale.
     --card-padding/--card-gap are deliberately SEPARATE from the general --space-* scale (rather
     than reusing --space-md for card padding) so tightening card density doesn't also silently
     retighten unrelated gaps (flex gaps, stack margins) that --space-md drives elsewhere. */
  --card-padding: 12px;                /* UI pass 2: was 15px - another notch off per the product owner ("still could be a bit tighter") */
  --card-gap: 14px;                    /* UI pass 2: was 20px - same reason */
  --table-cell-padding: 10px;         /* was: --space-sm/--space-md (8px/16px, asymmetric) on .table-standard */
  --content-width-detail: 1024px;     /* new: caps detail/record pages and the persistent action bar */
  --content-width-list: 1200px;       /* was: hardcoded 1200px inline on .app-main/.app-shell-header__bar */

  /* Elevation */
  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.18);

  /* Focus ring (keyboard accessibility, all interactive components) */
  --focus-ring: 0 0 0 3px rgba(74, 144, 226, 0.45);

  /* Motion */
  --transition-fast: 150ms ease-in-out;

  /* Layering */
  --z-shell-header: 100;
  --z-overlay: 1000;
  --z-toast: 1100;

  /* Responsive breakpoints (for reference in comments/docs; media queries repeat the raw px) */
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 480px;
}