/*
 * AORTA v2 — Design Tokens
 * Single source of truth for all design values.
 * Import this file FIRST in base.html before style.css.
 *
 * Usage: var(--color-primary), var(--radius-md), var(--space-4), etc.
 * To change the brand red across the entire app: edit --color-primary here only.
 */

:root {

  /* ── Brand colours ─────────────────────────────────────────────── */
  --color-primary:        #c0392b;   /* brand red — buttons, active states, badges */
  --color-primary-dark:   #a0281e;   /* hover / pressed state */
  --color-primary-light:  #FFF5F5;   /* error/danger tint backgrounds */
  --color-primary-border: #c0392b;   /* border on light tint surfaces */

  /* ── Structural colours ─────────────────────────────────────────── */
  --color-black:          #111111;   /* sidebar background, export buttons */
  --color-navy:           #1A2A3A;   /* report table headers, active chips */
  --color-navy-light:     #243447;   /* report table sub-headers */

  /* ── Semantic colours ───────────────────────────────────────────── */
  --color-success:        #3B6D11;   /* completed status */
  --color-success-light:  #EAF3DE;   /* completed badge background */
  --color-warning:        #854F0B;   /* in-progress / at-risk */
  --color-warning-light:  #FAEEDA;   /* in-progress badge background */
  --color-danger:         #c0392b;   /* same as primary — error states */
  --color-danger-light:   #FFF5F5;   /* error alert background */
  --color-info:           #185FA5;   /* alternative-date offered status */
  --color-info-light:     #E6F1FB;   /* info badge background */

  /* ── Neutral palette ────────────────────────────────────────────── */
  --color-white:          #ffffff;
  --color-surface:        #f4f4f4;   /* page background, metric card fill */
  --color-surface-row:    #f9f9f9;   /* alternating table row tint */
  --color-border:         #e0e0e0;   /* standard border / divider */
  --color-border-dark:    #cccccc;   /* stronger border on hover */

  /* ── Text ───────────────────────────────────────────────────────── */
  --color-text-primary:   #111111;   /* headings, table cell primary */
  --color-text-secondary: #666666;   /* labels, captions, meta */
  --color-text-heading:   #333333;   /* page sub-headings, form labels, table sub-text (v2.8.36) */
  --color-text-muted:     #999999;   /* timestamps, placeholder, empty state */
  --color-text-inverse:   #ffffff;   /* text on dark backgrounds */

  /* ── Sidebar (structural, not semantic) ─────────────────────────── */
  --color-sidebar-bg:     #111111;
  --color-sidebar-border: #c0392b;   /* 2px right border — brand moment */
  --color-sidebar-link:   #dddddd;
  --color-sidebar-active: #ffffff;
  --color-sidebar-section:#c0392b;   /* section heading labels */

  /* ── Report table tokens ────────────────────────────────────────── */
  --color-report-header:  #1A2A3A;   /* .report-th-eid / .report-th-company */
  --color-report-section: #1A2A3A;   /* .report-tr-section SP separator row */
  --color-report-success: #3B6D11;   /* .pf-green */
  --color-report-warning: #854F0B;   /* .pf-amber */

  /* ── Border radius scale ────────────────────────────────────────── */
  --radius-sm:   3px;    /* form inputs, table cells */
  --radius-md:   6px;    /* buttons, badges, filter chips */
  --radius-lg:   10px;   /* cards, modals, spec-boxes */
  --radius-pill: 50px;   /* status pills, count badges */

  /* ── Spacing scale (8px base grid) ─────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font: "Neue Haas Grotesk Display Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-xs:      11px;   /* micro labels, section keys */
  --text-sm:      12px;   /* captions, timestamps, meta */
  --text-base:    13px;   /* table cells, form fields */
  --text-md:      14px;   /* body, nav links */
  --text-lg:      16px;   /* page section text */
  --text-xl:      18px;   /* section headings */
  --text-2xl:     24px;   /* page headings */
  --text-3xl:     28px;   /* large headings */
  --text-metric:  32px;   /* dashboard metric values */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --sidebar-w:         200px;
  --sidebar-collapsed: 0px;
}