/* ============================================================
   ESG DataVault — Global Design Tokens
   ============================================================
   Single source-of-truth for all design values.
   Load this FIRST in base.html, before any other stylesheet.
   All CSS files should reference these tokens, not hardcoded values.
   ============================================================ */

:root {

  /* ── Brand Colours ─────────────────────────────────────── */
  --color-brand:       #2F4728;   /* Primary brand green       */
  --color-brand-dark:  #1e2f1a;   /* Hover / pressed state     */
  --color-brand-light: rgba(47, 71, 40, 0.08); /* Tinted bg   */
  --color-accent:      #5C7AEA;   /* Blue accent (active nav)  */

  /* ── Semantic Status Colours ───────────────────────────── */
  --color-success:       #28a745;
  --color-success-bg:    #d4edda;
  --color-success-text:  #155724;
  --color-success-border:#28a745;

  --color-danger:        #dc3545;
  --color-danger-dark:   #c82333;
  --color-danger-darker: #bd2130;
  --color-danger-bg:     #f8d7da;
  --color-danger-text:   #721c24;
  --color-danger-border: #dc3545;

  --color-warning:       #ffc107;
  --color-warning-bg:    #fff3cd;
  --color-warning-text:  #856404;
  --color-warning-border:#ffc107;

  --color-info:          #17a2b8;
  --color-info-bg:       #d1ecf1;
  --color-info-text:     #0c5460;
  --color-info-border:   #17a2b8;

  /* ── Neutral Surface Palette ───────────────────────────── */
  --color-white:        #ffffff;
  --color-surface:      #ffffff;   /* Card / panel background   */
  --color-bg:           #f8f9fa;   /* Page background           */
  --color-bg-subtle:    #f1f3f5;   /* Hover / subtle tint       */
  --color-border:       #dee2e6;   /* Standard border           */
  --color-border-dark:  #ced4da;   /* Focused / active border   */

  /* ── Text Colours ──────────────────────────────────────── */
  --color-text:         #111827;   /* Primary text              */
  --color-text-secondary: #374151; /* Secondary text            */
  --color-text-muted:   #6b7280;   /* Placeholders / metadata   */
  --color-text-disabled:#9ca3af;   /* Disabled elements         */

  /* ── Typography ────────────────────────────────────────── */
  --font-body: 'Inter', Arial, sans-serif;
  --font-mono: 'Courier New', Consolas, monospace;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  28px;

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

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-relaxed:1.7;

  /* ── Spacing Scale (4px base unit) ─────────────────────── */
  --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;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ── Z-Index Layer System ──────────────────────────────── */
  /* Always use these tokens — never a raw number.           */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-header:   100;
  --z-sidebar:  1000;
  --z-modal:    1050;
  --z-tooltip:  1100;
  --z-toast:    2000;

  /* ── Button Tokens ─────────────────────────────────────── */
  --btn-padding-x:    24px;
  --btn-padding-y:    12px;
  --btn-padding-sm-x: 12px;
  --btn-padding-sm-y: 6px;
  --btn-padding-lg-x: 32px;
  --btn-padding-lg-y: 14px;
  --btn-font-size:    var(--font-size-base);
  --btn-font-weight:  var(--font-weight-semibold);
  --btn-radius:       var(--radius-md);
  --btn-transition:   all var(--transition-base);

  /* ── Form Tokens ───────────────────────────────────────── */
  --input-padding-x:  12px;
  --input-padding-y:  12px;
  --input-border:     2px solid var(--color-border);
  --input-radius:     var(--radius-md);
  --input-font-size:  var(--font-size-base);
  --input-focus-shadow: 0 0 0 0.2rem rgba(47, 71, 40, 0.25);

  /* ── Top Navigation Heights ─────────────────────────────── */
  --nav-line1-height: 64px;   /* Brand / breadcrumb bar */
  --nav-line2-height: 56px;   /* Tab strip              */
  --nav-total-height: 120px;  /* Sum (used for min-height calc) */

  /* ── Top Navigation Overlay Alphas ─────────────────────── */
  /* Used for the frosted-glass search box and avatar bg    */
  --nav-overlay-subtle: rgba(255, 255, 255, 0.12);
  --nav-overlay-hover:  rgba(255, 255, 255, 0.22);
  --nav-overlay-focus:  rgba(255, 255, 255, 0.18);
  --nav-search-placeholder: rgba(255, 255, 255, 0.55);

  /* ── Content Container ──────────────────────────────────── */
  --content-max-width: 1440px;
  --content-padding-x: var(--space-8);  /* 32px from spacing scale */

}