/*
  tokens.css — Nium Portal Design Token Foundation
  ─────────────────────────────────────────────────
  Single source of truth for all CSS custom properties.
  Link FIRST before buttons.css, inputs.css, and page styles.

  <link rel="stylesheet" href="tokens.css">

  STATUS: Phase 1 complete — all decisions resolved.
  Phase 2 will replace hardcoded hex values with var() calls.

  Decisions log:
  01  --color-brand-navy: #1a2270 (canonical), #2d3748 → --color-brand-navy-muted
  02  --color-text-primary: #0f172a (consolidates #212b36 + #1a1a1a)
  03  Three mid-grays kept as distinct tokens
  04  #000000 color → --color-text-primary; border → --color-focus-ring
  05  #f8fafc consolidated into --color-bg-tertiary; #f5f5f5 → --color-bg-input
  06  #f0f1fc consolidated into --color-bg-brand-pale: #eef0ff
  07  Three dark nav bg values kept as distinct scale
  08  Overlay consolidated to rgba(0,0,0,0.4)
  09  Four hover opacities → two: 0.03 (hover) + 0.05 (row hover)
  10  Border scale fixed: tertiary 0.3 / primary 0.5 / secondary 0.85
  11  All focus borders → --color-focus-ring: #a9b4ff
  12  Duplicate success palette consolidated to existing success tokens
*/

:root {

  /* ── Brand ─────────────────────────────────────────────────────────── */
  --color-brand-navy:         #000;   /* canonical Nium navy */
  --color-brand-navy-muted:   #222;   /* secondary slate navy */
  --color-brand-navy-deep:    #111;   /* pressed / deepest state */
  --color-brand-navy-text:    #ffffff;
  --color-brand-accent:       #a9b4ff;   /* light accent */
  --color-brand-accent-light: #a9b4ff;   /* alias kept for compat */
  --color-brand-mid:          #3d52d5;   /* links, mid-weight brand */
  --color-focus-ring:         #a9b4ff;   /* all focus indicators */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --color-text-primary:       #0f172a;   /* main body text */
  --color-text-secondary:     #6b6b65;   /* supporting / nav text */
  --color-text-label:         #64748b;   /* form labels, table headers */
  --color-text-tertiary:      #919eab;   /* hints, timestamps, placeholders */
  --color-text-placeholder:   #94a3b8;   /* input placeholders */
  --color-text-muted:         #9e9e9a;   /* nav collapsed, faint UI */

  /* ── Backgrounds ───────────────────────────────────────────────────── */
  --color-bg-primary:         #ffffff;
  --color-bg-secondary:       #f1f5f9;
  --color-bg-tertiary:        #f9fafb;   /* also absorbs #f8fafc */
  --color-bg-input:           #f5f5f5;   /* disabled / read-only inputs */
  --color-bg-sidebar:         #eeeee8;   /* sidebar warm gray */
  --color-bg-skeleton:        #d1d5db;   /* loading skeleton */
  --color-bg-subtle:          #e4eaf0;   /* table alt rows, subtle tint */
  --color-bg-brand-pale:      #eef0ff;   /* pale brand tint — also absorbs #f0f1fc */
  --color-bg-brand-mid:       #dce0ff;   /* mid brand tint */
  --color-bg-nav-dark:        #1a2234;   /* dark sidebar active state */

  /* Overlays */
  --color-overlay:            rgba(0,0,0,0.4);     /* modal/drawer backdrop */
  --color-bg-hover:           rgba(0,0,0,0.03);    /* element hover */
  --color-bg-row-hover:       rgba(0,0,0,0.05);    /* table row hover */
  --color-nav-hover:          rgba(255,255,255,0.08);  /* dark sidebar hover */
  --color-shadow-sm:          rgba(33,43,54,0.32);

  /* ── Borders ───────────────────────────────────────────────────────── */
  --color-border-tertiary:    rgba(145,158,171,0.3);   /* subtle dividers */
  --color-border-primary:     rgba(145,158,171,0.5);   /* default borders */
  --color-border-secondary:   rgba(145,158,171,0.85);  /* inputs, emphasized */
  --color-border-divider:     #d0d0d0;                  /* table/list hard dividers */

  /* ── Status ─────────────────────────────────────────────────────────── */
  --color-success-bg:         #e8f4eb;   /* also absorbs #e8f2e6 */
  --color-success-dot:        #4d9c5e;
  --color-success-tag-bg:     #eaf3de;
  --color-success-text:       #27500a;   /* also absorbs #2d6327, #3b6d11 */
  --color-success-btn:        #2ea44f;
  --color-brand-green:         #2ea44f;   /* checkbox / UI green — alias of success-btn */

  --color-warning-tag-bg:     #faeeda;
  --color-warning-tag-text:   #633806;

  --color-danger-dot:         #e24b4a;
  --color-danger-tag-bg:      #fcebeb;
  --color-danger-tag-text:    #791f1f;
  --color-danger-text:        #a32d2d;
  --color-danger-mid:         #d04040;

  --color-info-tag-bg:        #e6f1fb;
  --color-info-tag-text:      #0c447c;

  --color-attention-bg:       #fef3f1;
  --color-attention-border:   #f0997b;
  --color-attention-text:     #b91c1c;

  --color-neutral-dot:        #b0b8c8;


  /* ── Warning palette (extracted from shared :root duplication) ──────── */
  --color-warning-bg:          #fef6e4;   /* warning bg — live badge */
  --color-warning-border:      #e8d08a;   /* warning border */
  --color-warning-text:        #7a5800;   /* warning text */
  --color-warning-text-dark:   #e07b0e;   /* amber warning action */
  --color-success-border-light:#b5d4b0;   /* light success border */

  /* ── Status chip palette ────────────────────────────────────────────── */
  --color-chip-success-bg:     #eafaf0;
  --color-chip-success-text:   #1a7a3a;
  --color-chip-danger-bg:      #fdf0f0;
  --color-chip-danger-text:    #9a2020;
  --color-chip-warning-bg:     #fff8ec;
  --color-chip-warning-text:   #9a5c00;
  --color-chip-info-bg:        #eff6ff;
  --color-chip-info-text:      #2563eb;
  --color-error-text:          #dc2626;   /* bright red error text */

  /* ── Avatar ─────────────────────────────────────────────────────────── */
  --color-avatar-bg:          transparent;
  --color-avatar-text:        #6f7677;

  /* ── Chart ──────────────────────────────────────────────────────────── */
  --color-chart-sent:         #0b0e58;
  --color-chart-received:     #5dcaa5;
  --color-chart-axis:         #5f5e5a;
  --color-chart-spark:        #9ca3af;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --sidebar-w-expanded:   240px;
  --sidebar-w-collapsed:  64px;

}