/* ================================================================
   GRC FORGE — DESIGN TOKENS  v3.0
   ================================================================
   Single Source of Truth for ALL CSS custom properties.
   
   Architecture:
     §1  Themed Foundations — targeted by themes.css [data-theme]
     §2  GRC Namespace      — canonical --grc-* (resolve to §1)
     §3  Scale & Utilities  — spacing, typography, radius, z-index
     §4  Legacy Aliases     — backward compat (styles.php, global.css…)
   ================================================================ */

:root {

    /* ═══════════════════════════════════════════════════════════
       §1  THEMED FOUNDATIONS
       These exact variable names are overridden by themes.css
       [data-theme] selectors. Do NOT rename without updating
       themes.css accordingly.
       ═══════════════════════════════════════════════════════════ */

    /* ── Backgrounds ── */
    --bg-primary:   #f6f8fb;
    --bg-secondary: #ffffff;
    --bg-tertiary:  #ecf0f2;
    --bg-card:      #ffffff;
    --bg-hover:     #f0f4f8;

    /* ── Text ── */
    --text-primary:  #2a2a2a;
    --text-secondary:#546269;
    --text-muted:    #8896a4;
    --text-disabled: #b4bec6;
    --text-dark:     #1e1e1e;

    /* ── Accents ── */
    --accent-orange:       #f5a425;
    --accent-orange-dark:  #e8951a;
    --accent-orange-light: #f7b84d;
    --accent-green:        #39cb7f;
    --accent-green-dark:   #2db36a;
    --accent-red:          #fc4b6c;
    --accent-red-dark:     #e03a5a;
    --accent-blue:         #0166A3;
    --accent-blue-dark:    #024f80;
    --accent-blue-light:   #0279c2;
    --accent-purple:       #7460ee;
    --accent-purple-dark:  #5e4bd1;
    --accent-yellow:       #fdc90f;

    /* ── Borders ── */
    --border-primary:   #e2e8f0;
    --border-secondary: #ecf0f2;
    --border-accent:    rgba(245, 164, 37, 0.4);

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

    /* ── Glass ── */
    --glass-bg:           #ffffff;
    --glass-border:       #ecf0f2;
    --glass-shadow:       0 2px 12px rgba(0,0,0,0.06);
    --glass-shadow-hover: 0 8px 28px rgba(0,0,0,0.10);

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(135deg, rgba(30,108,183,0.06), rgba(116,96,238,0.03));
    --gradient-card:    linear-gradient(160deg, #ffffff, #f6f8fb);


    /* ═══════════════════════════════════════════════════════════
       §2  GRC NAMESPACE — Canonical aliases
       New code should use --grc-* tokens. They auto-theme
       via var() references to §1 foundations.
       ═══════════════════════════════════════════════════════════ */

    /* ── Brand (themed via §1) ── */
    --grc-orange:       var(--accent-orange);
    --grc-orange-dark:  var(--accent-orange-dark);
    --grc-orange-light: var(--accent-orange-light);
    --grc-blue:         var(--accent-blue);
    --grc-blue-dark:    var(--accent-blue-dark);

    /* ── Brand opacity variants (fixed) ── */
    --grc-orange-glow:   rgba(245,164,37,0.10);
    --grc-orange-border: rgba(245,164,37,0.30);
    --grc-blue-glow:     rgba(1,102,163,0.08);
    --grc-blue-border:   rgba(1,102,163,0.25);

    /* ── Surfaces (themed via §1) ── */
    --grc-bg-base:     var(--bg-primary);
    --grc-bg-surface:  var(--bg-secondary);
    --grc-bg-elevated: var(--bg-tertiary);
    --grc-header-bg:   rgba(255,255,255,0.95);
    --grc-sidebar-bg:  #1f272b;

    /* ── Text (themed via §1) ── */
    --grc-text-primary:   var(--text-primary);
    --grc-text-secondary: var(--text-secondary);
    --grc-text-muted:     var(--text-muted);
    --grc-text-inverted:  #ffffff;

    /* ── Borders (themed via §1) ── */
    --grc-border:       var(--border-primary);
    --grc-border-hover: #cbd5e1;
    --grc-glass-bg:     var(--bg-secondary);
    --grc-glass-blur:   blur(16px);

    /* ── Semantic (themed via §1) ── */
    --grc-success: var(--accent-green);
    --grc-warning: var(--accent-yellow);
    --grc-danger:  var(--accent-red);
    --grc-info:    var(--accent-blue);

    /* ── Typography ── */
    --grc-font-display: 'Poppins', sans-serif;
    --grc-font-body:    'Poppins', sans-serif;
    --grc-font-mono:    'JetBrains Mono', monospace;

    /* ── Layout ── */
    --grc-sidebar-width:     260px;
    --grc-sidebar-collapsed: 72px;
    --grc-topbar-height:     64px;
    --grc-content-max:       1280px;
    --grc-radius-sm:  8px;
    --grc-radius-md:  12px;
    --grc-radius-lg:  16px;
    --grc-radius-xl:  24px;

    /* ── Shadows ── */
    --grc-shadow-card:   0 2px 12px rgba(1,102,163,0.06);
    --grc-shadow-hover:  0 8px 28px rgba(1,102,163,0.10);
    --grc-shadow-orange: 0 6px 24px rgba(245,164,37,0.20);


    /* ═══════════════════════════════════════════════════════════
       §3  SCALE & UTILITIES
       ═══════════════════════════════════════════════════════════ */

    /* ── Font Scale ── */
    --font-family:    'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;

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

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

    /* ── Spacing ── */
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

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

    /* ── Transitions ── */
    --transition-fast:   0.15s ease;
    --transition-base:   0.2s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.3s ease;
    --transition-all:    all 0.2s ease;

    /* ── Z-Index Scale ── */
    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-fixed:          1030;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;


    /* ═══════════════════════════════════════════════════════════
       §4  LEGACY ALIASES  (backward compatibility)
       Maps old shorthand variable names to §1 foundations
       so existing inline styles / module CSS keep working.
       ═══════════════════════════════════════════════════════════ */

    /* ── styles.php shorthand ── */
    --orange:      var(--accent-orange);
    --orange-dim:  var(--accent-orange-dark);
    --orange-glow: rgba(245,164,37,0.15);
    --gold:        var(--accent-yellow);
    --purple:      var(--accent-purple);
    --bg:          var(--bg-primary);
    --bg2:         var(--bg-secondary);
    --bg-elevated: var(--bg-tertiary);
    --card:        var(--bg-card);
    --card-hover:  var(--bg-hover);
    --border:      var(--border-primary);
    --border-glow: rgba(245,164,37,0.30);
    --text:        var(--text-primary);
    --muted:       var(--text-muted);
    --green:       var(--accent-green);
    --red:         var(--accent-red);
    --blue:        var(--accent-blue);

    /* ── global.css short names ── */
    --primary:       var(--accent-orange);
    --primary-dark:  var(--accent-orange-dark);
    --primary-light: var(--accent-orange-light);
    --secondary:     var(--accent-blue);
    --success:       var(--accent-green);
    --warning:       var(--accent-yellow);
    --danger:        var(--accent-red);
    --bg-dark:       var(--bg-primary);
    --bg-glass:      var(--bg-secondary);
    --border-color:  var(--border-primary);
    --border-light:  var(--border-secondary);
    --sidebar-width: var(--grc-sidebar-width);

    /* ── main.css --color-* namespace ── */
    --color-primary:         var(--accent-orange);
    --color-primary-light:   var(--accent-orange-light);
    --color-primary-dark:    var(--accent-orange-dark);
    --color-secondary:       var(--accent-blue);
    --color-secondary-light: var(--accent-blue-light);
    --color-secondary-dark:  var(--accent-blue-dark);
    --color-success:         var(--accent-green);
    --color-success-light:   #5dd99a;
    --color-warning:         var(--accent-yellow);
    --color-warning-light:   #fdd43f;
    --color-danger:          var(--accent-red);
    --color-danger-light:    #fd7b93;
    --color-info:            var(--accent-blue);
    --color-dark:            var(--bg-primary);
    --color-dark-lighter:    var(--bg-tertiary);
    --color-gray-900: #111827;
    --color-gray-800: #1f2937;
    --color-gray-700: #374151;
    --color-gray-600: #4b5563;
    --color-gray-500: #6b7280;
    --color-gray-400: #9ca3af;
    --color-gray-300: #d1d5db;
    --color-gray-200: #e5e7eb;
    --color-gray-100: #f3f4f6;
    --color-light:    #f8fafc;
    --color-white:    #ffffff;

    /* ── Glow shadows (main.css) ── */
    --shadow-glow-primary:   0 0 20px rgba(245,164,37,0.20);
    --shadow-glow-secondary: 0 0 20px rgba(30,108,183,0.20);

    /* ── components.css toast vars ── */
    --toast-success: var(--accent-green);
    --toast-error:   var(--accent-red);
    --toast-warning: var(--accent-yellow);
    --toast-info:    var(--accent-orange);
}