/*
 * CHANGE LOG
 * File: /var/www/html/modular.nsgia.com/static/css/nsg_tokens.css
 * Purpose: NSG Design System — CSS custom properties (tokens)
 *          Single source of truth for colors, typography, spacing, and component variables.
 *          Load this FIRST in base.html before any other CSS.
 *          All new CSS files must use var(--nsg-*) tokens instead of hardcoded values.
 * Version History:
 * 2026-04-27 v1.0 - Initial creation
 */

:root {

  /* ── Brand Colors ──────────────────────────────────────────── */
  --nsg-blue:          #1a73e8;
  --nsg-blue-dark:     #1558b0;
  --nsg-blue-light:    #e8f0fe;
  --nsg-green:         #28a745;
  --nsg-green-dark:    #1e7e34;
  --nsg-green-light:   #d4edda;
  --nsg-red:           #dc3545;
  --nsg-red-light:     #f8d7da;
  --nsg-orange:        #fd7e14;
  --nsg-yellow:        #ffc107;
  --nsg-yellow-light:  #fff3cd;

  /* ── Neutrals ───────────────────────────────────────────────── */
  --nsg-white:         #ffffff;
  --nsg-gray-50:       #f8f9fa;
  --nsg-gray-100:      #f4f4f4;
  --nsg-gray-200:      #e9ecef;
  --nsg-gray-300:      #dee2e6;
  --nsg-gray-400:      #ced4da;
  --nsg-gray-500:      #adb5bd;
  --nsg-gray-600:      #6c757d;
  --nsg-gray-700:      #495057;
  --nsg-gray-800:      #343a40;
  --nsg-gray-900:      #212529;
  --nsg-black:         #000000;

  /* ── Semantic Colors ────────────────────────────────────────── */
  --nsg-color-primary:     var(--nsg-blue);
  --nsg-color-success:     var(--nsg-green);
  --nsg-color-danger:      var(--nsg-red);
  --nsg-color-warning:     var(--nsg-yellow);
  --nsg-color-info:        #17a2b8;
  --nsg-color-muted:       var(--nsg-gray-600);
  --nsg-color-body:        var(--nsg-gray-900);
  --nsg-color-border:      var(--nsg-gray-300);
  --nsg-color-bg:          var(--nsg-white);
  --nsg-color-bg-alt:      var(--nsg-gray-50);
  --nsg-color-bg-dark:     var(--nsg-gray-800);

  /* ── Gate / Status Colors (used in PCO gate board) ─────────── */
  --nsg-gate-open:         var(--nsg-gray-400);
  --nsg-gate-in-progress:  var(--nsg-yellow);
  --nsg-gate-blocked:      var(--nsg-red);
  --nsg-gate-closed:       var(--nsg-green);

  /* ── Typography ─────────────────────────────────────────────── */
  --nsg-font-family:       Arial, "Helvetica Neue", Helvetica, sans-serif;
  --nsg-font-mono:         "Courier New", Courier, monospace;
  --nsg-font-size-xs:      11px;
  --nsg-font-size-sm:      13px;
  --nsg-font-size-base:    14px;
  --nsg-font-size-md:      16px;
  --nsg-font-size-lg:      18px;
  --nsg-font-size-xl:      22px;
  --nsg-font-size-h1:      28px;
  --nsg-font-size-h2:      22px;
  --nsg-font-size-h3:      18px;
  --nsg-font-weight-normal: 400;
  --nsg-font-weight-medium: 500;
  --nsg-font-weight-bold:   700;
  --nsg-line-height:        1.5;

  /* ── Spacing ────────────────────────────────────────────────── */
  --nsg-space-1:    4px;
  --nsg-space-2:    8px;
  --nsg-space-3:    12px;
  --nsg-space-4:    16px;
  --nsg-space-5:    20px;
  --nsg-space-6:    24px;
  --nsg-space-8:    32px;
  --nsg-space-10:   40px;
  --nsg-space-12:   48px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --nsg-container-width:   1200px;
  --nsg-content-width:     900px;
  --nsg-sidebar-width:     260px;
  --nsg-navbar-height:     50px;
  --nsg-footer-height:     60px;

  /* ── Borders ────────────────────────────────────────────────── */
  --nsg-border-width:      1px;
  --nsg-border-color:      var(--nsg-gray-300);
  --nsg-border:            var(--nsg-border-width) solid var(--nsg-border-color);
  --nsg-border-radius-sm:  3px;
  --nsg-border-radius:     4px;
  --nsg-border-radius-lg:  8px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --nsg-shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --nsg-shadow:      0 2px 6px rgba(0,0,0,.12);
  --nsg-shadow-lg:   0 4px 16px rgba(0,0,0,.16);

  /* ── Links ──────────────────────────────────────────────────── */
  --nsg-link-color:        var(--nsg-blue);
  --nsg-link-hover:        var(--nsg-blue-dark);

  /* ── Tables ─────────────────────────────────────────────────── */
  --nsg-table-border:      var(--nsg-gray-300);
  --nsg-table-head-bg:     var(--nsg-gray-100);
  --nsg-table-head-color:  var(--nsg-gray-700);
  --nsg-table-row-hover:   var(--nsg-blue-light);
  --nsg-table-stripe:      var(--nsg-gray-50);

  /* ── Buttons ────────────────────────────────────────────────── */
  --nsg-btn-padding-y:     6px;
  --nsg-btn-padding-x:     14px;
  --nsg-btn-font-size:     var(--nsg-font-size-sm);
  --nsg-btn-border-radius: var(--nsg-border-radius);

  /* ── Forms ──────────────────────────────────────────────────── */
  --nsg-input-border:      var(--nsg-gray-400);
  --nsg-input-focus:       var(--nsg-blue);
  --nsg-input-padding:     6px 10px;
  --nsg-input-radius:      var(--nsg-border-radius);

  /* ── Kanban / Cards ─────────────────────────────────────────── */
  --nsg-card-bg:           var(--nsg-white);
  --nsg-card-border:       var(--nsg-gray-300);
  --nsg-card-radius:       var(--nsg-border-radius-lg);
  --nsg-card-shadow:       var(--nsg-shadow-sm);
  --nsg-card-padding:      var(--nsg-space-4);

  /* ── Transitions ────────────────────────────────────────────── */
  --nsg-transition-fast:   0.15s ease;
  --nsg-transition:        0.25s ease;
}