/* ============================================================
   LAND BILHON — Design Tokens v1.0
   Unified tokens for: comercial.bilhon.space | rh.bilhon.space | reports.bilhon.space | forms.bilhon.space
   Author: Homer (Romulo Henricco) | 2026-03-30
   ============================================================ */

:root {
  /* ── Background Scale ── */
  --bl-bg-0: #030303;
  --bl-bg-1: #050505;
  --bl-bg-2: #09090c;
  --bl-bg-3: #0c0c0e;
  --bl-bg-4: #0f0f14;
  --bl-bg-5: #18181b;

  /* ── Background Semantic ── */
  --bl-bg-primary:    #09090c;   /* = bg-2 */
  --bl-bg-elevated:   #0f0f14;   /* = bg-4 */
  --bl-bg-surface:    #0F0F11;
  --bl-bg-surface-alt:#1C1E19;
  --bl-bg-card:       rgba(255, 255, 255, 0.03);
  --bl-bg-card-hover: rgba(255, 255, 255, 0.06);

  /* ── Foreground / Text ── */
  --bl-text-primary:  #f4f4e8;
  --bl-text-secondary:#e4e4e7;
  --bl-text-dim:      #71717a;
  --bl-text-muted:    #52525b;
  --bl-text-ghost:    rgba(245, 244, 231, 0.4);

  /* ── Brand ── */
  --bl-green:         #6bc950;
  --bl-green-dim:     rgba(107, 201, 80, 0.15);
  --bl-green-glow:    rgba(107, 201, 80, 0.25);
  --bl-green-soft:    rgba(107, 201, 80, 0.08);

  /* ── Brand Green Scale ── */
  --bl-green-100: #CCFFE1;
  --bl-green-200: #99FFc4;
  --bl-green-300: #5CFF9D;
  --bl-green-400: #33E87B;
  --bl-green-500: #6bc950;
  --bl-green-600: #00B848;
  --bl-green-700: #009038;
  --bl-green-800: #006828;
  --bl-green-900: #004018;

  /* ── Semantic Colors ── */
  --bl-blue:          #60a5fa;
  --bl-blue-bright:   #0099FF;
  --bl-purple:        #a855f7;
  --bl-orange:        #fb923c;
  --bl-red:           #ef4444;
  --bl-cyan:          #06b6d4;
  --bl-yellow:        #fbbf24;
  --bl-pink:          #ec4899;
  --bl-gold:          #D4A853;

  /* ── Status Colors ── */
  --bl-success: #6bc950;
  --bl-info:    #60a5fa;
  --bl-warning: #fbbf24;
  --bl-danger:  #ef4444;

  /* ── Product Accent (per-project override) ── */
  --bl-accent:        var(--bl-green);
  --bl-accent-dim:    var(--bl-green-dim);
  --bl-accent-glow:   var(--bl-green-glow);
  --bl-accent-rgb:    107, 201, 80;

  /* ── Borders (numeric tiers) ── */
  --bl-border-1: rgba(255, 255, 255, 0.04);
  --bl-border-2: rgba(255, 255, 255, 0.06);
  --bl-border-3: rgba(255, 255, 255, 0.08);
  --bl-border-4: rgba(255, 255, 255, 0.12);
  /* ── Borders (semantic) ── */
  --bl-border:        rgba(255, 255, 255, 0.06);  /* = border-2 */
  --bl-border-hover:  rgba(255, 255, 255, 0.12);  /* = border-4 */
  --bl-border-accent: rgba(107, 201, 80, 0.2);

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

  /* ── Typography ── */
  --bl-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bl-font-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --bl-font-display:  'Inter', system-ui, sans-serif;

  /* ── Font Sizes ── */
  --bl-text-2xs:      8px;
  --bl-text-xs:       9px;
  --bl-text-sm:       10px;
  --bl-text-base:     13px;
  --bl-text-md:       14px;
  --bl-text-lg:       16px;
  --bl-text-xl:       20px;
  --bl-text-2xl:      24px;
  --bl-text-3xl:      28px;

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

  /* ── Shadows ── */
  --bl-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.3);
  --bl-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.4);
  --bl-shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.5);
  --bl-shadow-xl:     0 20px 60px rgba(0, 0, 0, 0.6);

  /* ── Glow Effects ── */
  --bl-glow-green:    0 0 20px rgba(107, 201, 80, 0.30), 0 0 60px rgba(107, 201, 80, 0.12);
  --bl-glow-blue:     0 0 20px rgba(0, 153, 255, 0.30), 0 0 60px rgba(0, 153, 255, 0.12);
  --bl-glow-gold:     0 0 20px rgba(212, 168, 83, 0.30), 0 0 60px rgba(212, 168, 83, 0.12);
  --bl-glow-red:      0 0 20px rgba(239, 68, 68, 0.30), 0 0 60px rgba(239, 68, 68, 0.12);

  /* ── Blur (Glassmorphism) ── */
  --bl-blur-sm: blur(12px);
  --bl-blur-lg: blur(24px);

  /* ── Transitions ── */
  --bl-ease-default:  180ms ease;
  --bl-ease-spring:   300ms cubic-bezier(0.16, 1, 0.3, 1);
  --bl-ease-fast:     120ms ease;

  /* ── Z-Index ── */
  --bl-z-dropdown:    100;
  --bl-z-topbar:      200;
  --bl-z-sidebar:     300;
  --bl-z-modal:       400;
  --bl-z-toast:       500;

  /* ── Topbar ── */
  --bl-topbar-height: 56px;
  --bl-topbar-bg:     rgba(9, 9, 12, 0.85);

  /* ── Grid Background ── */
  --bl-grid-opacity:  0.02;
  --bl-grid-size:     60px;

  /* ── Scrollbar ── */
  --bl-scroll-width:  6px;
  --bl-scroll-track:  #09090c;
  --bl-scroll-thumb:  #3D3D3D;
  --bl-scroll-hover:  #696969;
}

/* ── Product-specific accent overrides ── */
[data-product="comercial"] { --bl-accent: #3b82f6; --bl-accent-dim: rgba(59,130,246,0.15); --bl-accent-glow: rgba(59,130,246,0.25); }
[data-product="rh"]        { --bl-accent: #6bc950; --bl-accent-dim: rgba(107,201,80,0.15); --bl-accent-glow: rgba(107,201,80,0.25); }
[data-product="reports"]   { --bl-accent: #a855f7; --bl-accent-dim: rgba(168,85,247,0.15); --bl-accent-glow: rgba(168,85,247,0.25); }
[data-product="forms"]     { --bl-accent: #f59e0b; --bl-accent-dim: rgba(245,158,11,0.15); --bl-accent-glow: rgba(245,158,11,0.25); }

/* ── Executor Colors (HybridOps) ── */
[data-executor="ai"]     { --bl-executor: #0099FF; --bl-executor-glow: rgba(0,153,255,0.30); }
[data-executor="hybrid"] { --bl-executor: #D4A853; --bl-executor-glow: rgba(212,168,83,0.30); }
[data-executor="human"]  { --bl-executor: #f4f4e8; --bl-executor-glow: rgba(244,244,232,0.15); }