/* ============================================================
   FILE: frontend/core/variables.css
   PURPOSE: Global CSS custom properties (design tokens)
   Design System: iNFiNiTi CGS Manager V1.5
   Updated: Session 194 — density revision
   ============================================================ */

:root {

  /* ── BACKGROUND LAYERS ─────────────────────────────────── */
  --color-bg-base:          #0B1F3A;
  --color-bg-deep:          #071529;
  --color-bg-card:          #112845;
  --color-bg-hover:         #1A3A5C;
  --color-bg-readonly:      rgba(0, 0, 0, 0.18);

  /* ── ACCENT AND STATUS ─────────────────────────────────── */
  --color-accent:           #4A9FD5;
  --color-accent-muted:     rgba(74, 159, 213, 0.12);
  --color-accent-hover:     #3a8fc5;
  --color-accent-bg-dark:   rgba(74, 159, 213, 0.15);
  --color-accent-border-dark: rgba(74, 159, 213, 0.3);
  --color-success:          #17A589;
  --color-warning:          #D4900F;
  --color-danger:           #E05555;
  --color-purple:           #8b5cf6;
  --color-purple-bg-dark:   #2d1f4e;

/* ── STATUS SEMI-TRANSPARENT VARIANTS ─────────────────── */
  --color-success-bg-alpha:     rgba(23, 165, 137, 0.18);
  --color-success-border-alpha: rgba(23, 165, 137, 0.35);
  --color-warning-bg-alpha:     rgba(212, 144, 15, 0.18);
  --color-warning-border-alpha: rgba(212, 144, 15, 0.35);
  --color-danger-bg-alpha:      rgba(224, 85, 85, 0.18);
  --color-danger-border-alpha:  rgba(224, 85, 85, 0.35);
  --color-info:                 #4A9FD5;
  --color-info-bg-alpha:        rgba(74, 159, 213, 0.18);
  --color-info-border-alpha:    rgba(74, 159, 213, 0.35);

  /* ── TEXT ──────────────────────────────────────────────── */
  --color-text-primary:     rgba(255, 255, 255, 0.85);
  --color-text-secondary:   rgba(255, 255, 255, 0.55);
  --color-text-muted:       rgba(255, 255, 255, 0.35);
  --color-text-hint:        rgba(255, 255, 255, 0.22);
  --color-text-on-accent:   #ffffff;
  --color-text-label:       rgba(255, 255, 255, 0.70);

  /* ── BORDERS ───────────────────────────────────────────── */
  --color-border-default:   rgba(255, 255, 255, 0.07);
  --color-border-dark:      rgba(255, 255, 255, 0.10);
  --color-border-input:     rgba(255, 255, 255, 0.14);

  /* ── TYPOGRAPHY ────────────────────────────────────────── */
  --font-heading:           'Libre Baskerville', serif;
  --font-body:              'IBM Plex Sans', sans-serif;

  /* ── RADIUS ────────────────────────────────────────────── */
  --radius-btn:             6px;
  --radius-badge:           6px;
  --radius-card:            7px;
  --radius-modal:           8px;
  --radius-frame:           12px;
  --radius-input:           6px;

  /* ── SPACING TOKENS — V1.5 REVISED ────────────────────── */
  /* All values reduced from V1.4 to match showcase density. */
  /* See Design System V1.5 Section 3.4 for rationale.       */
  --nav-height:             38px;   /* was 52px */
  --subnav-height:          30px;   /* was 36px */
  --page-padding:           10px 12px; /* was 22px 24px */
  --card-padding:           10px 12px; /* was 16px 18px */
  --card-gap:               7px;
  --kpi-gap:                7px;
  --table-row-padding:      4px 6px;
  --modal-padding:          16px 20px;

  /* ── SURFACE TOKENS ────────────────────────────────────── */
  --color-surface-input:    rgba(255, 255, 255, 0.04);
  --color-surface-card:     #112845;
  --color-surface-raised:   rgba(255, 255, 255, 0.06);
  --color-surface-muted:    rgba(255, 255, 255, 0.03);

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-card:            0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-modal:           0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-dropdown:        0 4px 20px rgba(0, 0, 0, 0.4);

  /* ── MODAL BACKDROP ────────────────────────────────────── */
  --color-modal-backdrop:   rgba(0, 0, 0, 0.55);

  /* ── BORDER SHORTHAND ──────────────────────────────────── */
  --border-default:         0.5px solid rgba(255, 255, 255, 0.07);
  --border-width-default:   0.5px;
  --border-width-focus:     2px;

  /* ── WHITE SURFACE VARIANTS ────────────────────────────── */
  --color-white-subtle:     rgba(255, 255, 255, 0.03);
  --color-white-border:     rgba(255, 255, 255, 0.08);
  --color-white-raised:     rgba(255, 255, 255, 0.10);
  --color-white-emphasis:   rgba(255, 255, 255, 0.18);

/* ── STATUS SEMI-TRANSPARENT VARIANTS ─────────────────── */
  --color-success-bg-alpha:   rgba(23, 165, 137, 0.18);
  --color-success-border-alpha: rgba(23, 165, 137, 0.35);
  --color-warning-bg-alpha:   rgba(212, 144, 15, 0.18);
  --color-warning-border-alpha: rgba(212, 144, 15, 0.35);
  --color-danger-bg-alpha:    rgba(224, 85, 85, 0.18);
  --color-danger-border-alpha: rgba(224, 85, 85, 0.35);
  --color-info-bg-alpha:      rgba(74, 159, 213, 0.18);
  --color-info-border-alpha:  rgba(74, 159, 213, 0.35);
  --color-info:               #4A9FD5;

}