:root{
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ==========================================================================
     SPACING — base unit 8px, scale steps of 4px
     ========================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Off-grid spacing preserved from the original mockups. These sit between
     scale steps; candidates to snap onto the grid in a later intentional pass. */
  --space-hair: 2px;   /* sub-grid hairline (inline highlight padding, focus offset) */
  --space-1h: 6px;     /* between --space-1 (4) and --space-2 (8) */
  --list-indent: 18px; /* bullet-list hanging indent */

  /* ==========================================================================
     RADII
     ========================================================================== */
  --radius-xs: 2px;
  --radius-1: 4px;
  --radius-2: 6px;   /* default surface radius: shell, cards, buttons, panels, tabs */
  --radius-3: 8px;   /* larger surfaces: nav items, toast, review content */
  --radius-4: 12px;
  --radius-full: 100px;  /* fully-rounded chips */
  --radius-circle: 50%;  /* avatars, dots */

  /* ==========================================================================
     TYPE SCALE
     ========================================================================== */
  /* Allowed sizes: 12 / 13 / 14 / 16 / 20 / 24 — nothing else, nothing bigger. */
  --fs-xs: 12px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 16px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ==========================================================================
     ELEVATION / SHADOW
     ========================================================================== */
  --shadow-xs: 0 1px 4px rgba(var(--ink-rgb), 0.06);
  --shadow-2: 0 6px 20px rgba(var(--ink-rgb), 0.12);
  --shadow-hover: 0 6px 18px rgba(var(--accent-rgb), 0.06);
  --shadow-dialog: 0 24px 48px -12px rgba(var(--ink-rgb), 0.28), 0 2px 6px rgba(var(--ink-rgb), 0.06);
  --scrim: rgba(var(--ink-rgb), 0.32);

  /* ==========================================================================
     MOTION
     ========================================================================== */
  --motion-fast: .15s;
  --motion-medium: .15s;
  --motion-dialog: .2s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* fast start, soft landing */
  --lift: -1px;   /* hover nudge distance */

  /* ==========================================================================
     FOCUS
     ========================================================================== */
  --focus-ring-width: 3px;
  --focus-ring-color: rgba(var(--accent-rgb), 0.12);


  /* ==========================================================================
     COLOR
     --------------------------------------------------------------------------
     Two tiers: a raw palette (neutrals + hues), then semantic aliases that
     the rules use. Re-theme by re-pointing a semantic alias; shift a whole
     ramp by editing a palette value.
     Values are still held exactly as they were — no color is visually
     changed here, this only names and groups them. Numbers left in comments
     mark values that a later pass should unify (esp. the red family).
     ========================================================================== */

  /* ---- Neutral palette — slate (Tailwind values), light to dark ---- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F8FAFC;   /* hover, table header, sidebar */
  --gray-100: #F1F5F9;   /* page behind the frame, pressed */
  --gray-200: #E2E8F0;   /* every hairline border */
  --gray-300: #CBD5E1;   /* input border */
  --gray-400: #94A3B8;   /* tertiary text, placeholder */
  --gray-500: #64748B;   /* secondary text */
  --gray-600: #475569;   /* icons, category */
  --gray-700: #334155;   /* body text */
  --gray-900: #0F172A;   /* titles */

  /* rgb channel lists for rgba() tints (shadows, focus ring) */
  --ink-rgb: 15, 23, 42;
  --accent-rgb: 37, 99, 235;   /* = --blue-600 */

  /* ---- Hue palette — light to dark within each family.
     Status and confidence colors from the original mockups. (Diff tints
     are set directly on the --del-* / --ins-* tokens below.) ---- */

  /* green — success / approved / added */
  --green-100: #DCF2E3;   /* approved chip bg */
  --green-600: #2E9E5B;   /* confidence fill (high) */
  --green-800: #1B6B3B;   /* approved text, high-confidence text */

  /* amber — caution / pending / mid */
  --amber-50:  #FDF2D8;   /* pending chip bg */
  --amber-500: #D6A419;   /* confidence fill (mid) */
  --amber-800: #92650C;   /* pending text, mid-confidence text */

  /* red — danger / deny / low confidence */
  --red-50:  #FCECEC;   /* deny button bg */
  --red-300: #F1A7A7;   /* deny button border */
  --red-500: #D65A5A;   /* confidence fill (low) */
  --red-700: #B23A3A;   /* low-confidence text */
  --red-800: #8A2B2B;   /* deny button text */

  /* blue — accent / in-progress */
  --blue-50:  #EFF6FF;   /* just-changed row flash */
  --blue-600: rgb(var(--accent-rgb));   /* accent (#1F6FEB) */

  /* ---- Semantic: surfaces ---- */
  --surface: var(--gray-0);
  --header-bg: var(--gray-50);
  --page-bg: var(--gray-100);
  --table-header-bg: var(--gray-50);
  --row-hover-bg: var(--gray-50);
  --avatar-bg: var(--gray-100);

  /* ---- Semantic: borders (one hairline color everywhere) ---- */
  --shell-border: var(--gray-200);
  --row-divider: var(--gray-200);
  --input-border: var(--gray-300);

  /* ---- Semantic: text ---- */
  --primary-text: var(--gray-900);
  --body-text: var(--gray-700);
  --meta-text: var(--gray-500);
  --faint-text: var(--gray-400);
  --category-text: var(--gray-600);
  --text-on-accent: var(--gray-0);   /* text/glyphs on accent or active fills */

  /* ---- Semantic: accent ---- */
  --accent: var(--blue-600);

  /* ---- Semantic: status chips ---- */
  --chip-pending-bg: var(--amber-50);    --chip-pending-text: var(--amber-800);
  --chip-approved-bg: var(--green-100);  --chip-approved-text: var(--green-800);

  /* ---- Semantic: confidence tiers ---- */
  --chip-denied-bg: var(--red-50); --chip-denied-text: var(--red-800);
  --conf-high-fill: var(--green-600); --conf-high-text: var(--green-800);
  --conf-mid-fill: var(--amber-500); --conf-mid-text: var(--amber-800);
  --conf-low-fill: var(--red-500);   --conf-low-text: var(--red-700);

  /* ---- Semantic: deny button ---- */
  --deny-bg: var(--red-50); --deny-border: var(--red-300); --deny-text: var(--red-800);
  /* AI-authored things (flag events, the recommended column) — indigo, so the
     AI's voice is distinguishable from the blue reserved for actions */
  --ai: #4F46E5; --ai-soft: #EEF2FF;
  /* status banner surfaces */
  --banner-denied-border: #FAD4D4; --banner-approved-bg: #F0FDF4;
  /* solid destructive confirm (dialogs) */
  --danger: var(--red-700);

  /* ---- Semantic: diff highlighting ---- */
  /* tint-only highlights; removed text keeps a faint strikethrough so it isn't color-only */
  --del-bg: #FEE2E2;   --del-text: #991B1B;   --del-line: rgba(153, 27, 27, .45);
  --ins-bg: #DCFCE7;   --ins-text: #166534;
  --legend-removed: var(--del-bg); --legend-added: var(--ins-bg);

  /* ==========================================================================
     COMPONENT SIZES
     ========================================================================== */
  --header-height: 56px;
  --sidebar-width: 216px;
  --nav-item-size: 36px;
  --row-height: 52px;
  --conf-dot-size: 10px;
  --frame-width: 1600px;   /* the app fills the window up to this, then centers (huge monitors) */
  --dialog-width: 440px;
}