/* ============================================================================
   Penaxtra · Design Tokens - LIGHT theme ("AI Risk Command Center")
   ----------------------------------------------------------------------------
   ONE cohesive light theme. Warm-stone neutral foundation + a deep navy-blue
   brand accent + a disciplined, harmonious severity palette. Every value is
   AA-legible on the surfaces it is used on. Token NAMES are the drop-in
   contract - do not rename. Component CSS (overrides.css) derives everything
   else from these via color-mix()/gradients.
   ============================================================================ */

:root {
  /* ---- Ink base (for shadows / mixes; not part of the public contract) ---- */
  --ink-rgb: 22 29 41;          /* @kind color */ /* deep navy ink, for soft shadows */
  --paper-warm: 38 27 12;       /* @kind color */ /* warm hue pushed into neutrals  */

  /* ======================== COLOR · SURFACES ============================== */
  /* Near-white, neutral (whisper-cool) layers - clean command-center, not warm  */
  /* cream. Depth comes from the faint graph-paper grid + soft shadows, not tint. */
  --bg-base:      #f5f6f8;   /* page background - neutral near-white            */
  --bg-surface:   #ecedf1;   /* recessed / secondary surface (wells, sidebar)  */
  --bg-elevated:  #ffffff;   /* cards / raised surfaces                        */
  --bg-input:     #f8f9fb;   /* form fields                                    */
  --bg-hover:     #eef0f4;   /* row / control hover                            */

  /* ======================== COLOR · BORDERS =============================== */
  --border-default: #e4e7ec;  /* hairline                                      */
  --border-strong:  #cfd4db;  /* emphasized                                    */
  --border-focus:   #1d4063;  /* focus ring (= accent)                         */

  /* ======================== COLOR · TEXT ================================== */
  --text-primary:   #181f2b;  /* deep navy ink                               */
  --text-secondary: #4b5566;  /* labels, secondary copy                      */
  --text-muted:     #646c78;  /* muted - captions, axis labels (AA)          */
  --text-inverse:   #fbf9f4;  /* text on accent / dark fills                 */

  /* ======================== COLOR · BRAND ACCENT ========================= */
  /* Deep authoritative navy-blue - trust, "command center". Distinct from   */
  /* the crimson signal (logo) and from info-blue (lighter).                 */
  --accent-primary: #1d4063;
  --accent-hover:   #173550;  /* darker on hover                             */
  --accent-active:  #112740;  /* darker still on press                       */

  /* ======================== COLOR · SEVERITY ============================= */
  /* Mutually distinguishable & harmonious on light surfaces. The hue values */
  /* are the chart/accent colors; -bg are low-alpha tints for badges/rows.   */
  --severity-critical:    #c0252b;   --severity-critical-bg: #fbe7e6;
  --severity-high:        #c2670f;   --severity-high-bg:     #fcf0e1;
  --severity-medium:      #9a7b0e;   --severity-medium-bg:   #f8f2d6;
  --severity-low:         #2c7a4c;   --severity-low-bg:      #e5f2ea;
  --severity-info:        #2f6aa0;   --severity-info-bg:     #e7eff7;

  /* ======================== COLOR · STATUS =============================== */
  --status-success:    #2c7a4c;   --status-success-bg: #e5f2ea;
  --status-warning:    #c2670f;
  --status-danger:     #c0252b;

  /* ============================ TYPOGRAPHY =============================== */
  --font-sans: "Archivo", "Archivo Fallback", ui-sans-serif, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   20px;
  --font-size-2xl:  28px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0;

  /* ============================== RADIUS ================================ */
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-none: 0;

  /* ============================ STRUCTURAL ============================== */
  --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;

  --sidebar-width:           240px;
  --sidebar-collapsed-width: 56px;
  --topbar-height:           56px;
  --breadcrumb-height:       36px;

  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */

  --z-dropdown: 100;  /* @kind other */
  --z-sticky:   200;  /* @kind other */
  --z-modal:    300;  /* @kind other */
  --z-toast:    400;  /* @kind other */

  /* ===================== EXTENDED (derived, in-system) =================== */
  /* Soft, layered shadows tinted with ink - quiet depth, never heavy.       */
  --shadow-xs: 0 1px 1px rgba(var(--ink-rgb), 0.05);
  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.06), 0 1px 1px rgba(var(--ink-rgb), 0.04);
  --shadow-md: 0 6px 16px -6px rgba(var(--ink-rgb), 0.14), 0 2px 5px -2px rgba(var(--ink-rgb), 0.07);
  --shadow-lg: 0 18px 38px -12px rgba(var(--ink-rgb), 0.22), 0 6px 14px -6px rgba(var(--ink-rgb), 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--border-focus) 28%, transparent);
}