/*
 * AppDeployHub Design System — tokens.css
 * Shared between AppDeployHub and AppDeployHub Forge
 * Brand: #2563EB (blue) + #0F172A (navy)
 * ─────────────────────────────────────────────────────
 */

:root {
  /* ═══════════════════════════════════
     BRAND
  ═══════════════════════════════════ */
  --adh-primary:          #2563EB;
  --adh-primary-hover:    #1D4ED8;
  --adh-primary-active:   #1E40AF;
  --adh-primary-400:      #60A5FA;
  --adh-primary-300:      #93C5FD;
  --adh-primary-glow:     rgba(37, 99, 235, 0.25);
  --adh-primary-glow-sm:  rgba(37, 99, 235, 0.15);

  --adh-navy:             #0F172A;
  --adh-navy-800:         #1E293B;
  --adh-navy-700:         #263348;
  --adh-navy-600:         #334155;
  --adh-navy-500:         #475569;

  /* ═══════════════════════════════════
     SURFACE
  ═══════════════════════════════════ */
  --adh-bg:               #0F172A;
  --adh-surface:          #1E293B;
  --adh-surface-raised:   #263348;
  --adh-surface-overlay:  #2D3F57;
  --adh-surface-hover:    rgba(255, 255, 255, 0.04);
  --adh-surface-active:   rgba(255, 255, 255, 0.07);

  /* ═══════════════════════════════════
     BORDER
  ═══════════════════════════════════ */
  --adh-border:           rgba(255, 255, 255, 0.08);
  --adh-border-strong:    rgba(255, 255, 255, 0.15);
  --adh-border-focus:     var(--adh-primary);
  --adh-border-active:    rgba(37, 99, 235, 0.5);

  /* ═══════════════════════════════════
     GLASS
  ═══════════════════════════════════ */
  --adh-glass-bg:         rgba(15, 23, 42, 0.75);
  --adh-glass-border:     rgba(37, 99, 235, 0.2);
  --adh-glass-border-sm:  rgba(37, 99, 235, 0.12);
  --adh-blur:             blur(14px) saturate(180%);
  --adh-blur-sm:          blur(8px) saturate(150%);

  /* ═══════════════════════════════════
     TEXT
  ═══════════════════════════════════ */
  --adh-text:             #F1F5F9;
  --adh-text-secondary:   #94A3B8;
  --adh-text-muted:       #64748B;
  --adh-text-disabled:    #475569;
  --adh-text-link:        #60A5FA;
  --adh-text-link-hover:  #93C5FD;
  --adh-text-on-primary:  #FFFFFF;
  --adh-text-inverse:     #0F172A;

  /* ═══════════════════════════════════
     STATUS
  ═══════════════════════════════════ */
  --adh-success:          #22C55E;
  --adh-success-hover:    #16A34A;
  --adh-success-bg:       rgba(34, 197, 94, 0.1);
  --adh-success-border:   rgba(34, 197, 94, 0.3);

  --adh-warning:          #F59E0B;
  --adh-warning-hover:    #D97706;
  --adh-warning-bg:       rgba(245, 158, 11, 0.1);
  --adh-warning-border:   rgba(245, 158, 11, 0.3);

  --adh-error:            #EF4444;
  --adh-error-hover:      #DC2626;
  --adh-error-bg:         rgba(239, 68, 68, 0.1);
  --adh-error-border:     rgba(239, 68, 68, 0.3);

  --adh-info:             #38BDF8;
  --adh-info-hover:       #0EA5E9;
  --adh-info-bg:          rgba(56, 189, 248, 0.1);
  --adh-info-border:      rgba(56, 189, 248, 0.3);

  --adh-running:          #2563EB;
  --adh-running-bg:       rgba(37, 99, 235, 0.12);
  --adh-pending:          #F59E0B;
  --adh-cancelled:        #64748B;

  /* ═══════════════════════════════════
     RADIUS
  ═══════════════════════════════════ */
  --adh-radius-xs:    2px;
  --adh-radius-sm:    4px;
  --adh-radius-md:    8px;
  --adh-radius-lg:    12px;
  --adh-radius-xl:    16px;
  --adh-radius-2xl:   24px;
  --adh-radius-full:  9999px;

  /* ═══════════════════════════════════
     SHADOW
  ═══════════════════════════════════ */
  --adh-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
  --adh-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --adh-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --adh-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.35);
  --adh-shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
  --adh-shadow-glow:  0 0 0 3px var(--adh-primary-glow);
  --adh-shadow-glow-lg: 0 0 20px rgba(37, 99, 235, 0.35), 0 0 40px rgba(37, 99, 235, 0.15);

  /* ═══════════════════════════════════
     SPACING (8pt grid)
  ═══════════════════════════════════ */
  --adh-space-px:   1px;
  --adh-space-0-5:  2px;
  --adh-space-1:    4px;
  --adh-space-2:    8px;
  --adh-space-3:    12px;
  --adh-space-4:    16px;
  --adh-space-5:    20px;
  --adh-space-6:    24px;
  --adh-space-7:    28px;
  --adh-space-8:    32px;
  --adh-space-10:   40px;
  --adh-space-12:   48px;
  --adh-space-16:   64px;
  --adh-space-20:   80px;
  --adh-space-24:   96px;

  /* ═══════════════════════════════════
     TYPOGRAPHY
  ═══════════════════════════════════ */
  --adh-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --adh-font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;

  --adh-text-xs:    11px;
  --adh-text-sm:    13px;
  --adh-text-base:  15px;
  --adh-text-md:    16px;
  --adh-text-lg:    18px;
  --adh-text-xl:    20px;
  --adh-text-2xl:   24px;
  --adh-text-3xl:   30px;
  --adh-text-4xl:   36px;

  --adh-leading-tight:  1.25;
  --adh-leading-snug:   1.375;
  --adh-leading-normal: 1.5;
  --adh-leading-relaxed: 1.625;

  --adh-tracking-tight:  -0.025em;
  --adh-tracking-normal: 0;
  --adh-tracking-wide:   0.025em;
  --adh-tracking-caps:   0.08em;

  /* ═══════════════════════════════════
     TRANSITIONS
  ═══════════════════════════════════ */
  --adh-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --adh-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --adh-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --adh-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --adh-duration-fast:    100ms;
  --adh-duration-base:    150ms;
  --adh-duration-slow:    250ms;
  --adh-duration-slower:  350ms;

  --adh-transition:       var(--adh-duration-base) var(--adh-ease);
  --adh-transition-fast:  var(--adh-duration-fast) var(--adh-ease);
  --adh-transition-slow:  var(--adh-duration-slow) var(--adh-ease);

  /* ═══════════════════════════════════
     LAYOUT
  ═══════════════════════════════════ */
  --adh-sidebar-width:      240px;
  --adh-sidebar-collapsed:  64px;
  --adh-topbar-height:      56px;
  --adh-content-max-width:  1200px;
  --adh-content-padding:    var(--adh-space-6);

  /* ═══════════════════════════════════
     Z-INDEX
  ═══════════════════════════════════ */
  --adh-z-base:     0;
  --adh-z-raised:   10;
  --adh-z-dropdown: 100;
  --adh-z-sticky:   200;
  --adh-z-overlay:  300;
  --adh-z-modal:    400;
  --adh-z-toast:    500;
  --adh-z-tooltip:  600;

  /* ═══════════════════════════════════
     ANIMATION KEYFRAMES (defined once)
  ═══════════════════════════════════ */
}

/* Running pulse — used on status dots */
@keyframes adh-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Glow pulse — used on active build cards */
@keyframes adh-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--adh-primary-glow); }
  50%       { box-shadow: 0 0 0 6px transparent; }
}

/* Spin — used on loading indicators */
@keyframes adh-spin {
  to { transform: rotate(360deg); }
}

/* Fade in up — page transitions */
@keyframes adh-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide in right — sidebar panels */
@keyframes adh-slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Progress indeterminate */
@keyframes adh-progress-indeterminate {
  0%   { left: -40%; width: 40%; }
  60%  { left: 100%; width: 40%; }
  100% { left: 100%; width: 40%; }
}

/* Stagger helper classes */
.adh-stagger-1 { animation-delay: 50ms; }
.adh-stagger-2 { animation-delay: 100ms; }
.adh-stagger-3 { animation-delay: 150ms; }
.adh-stagger-4 { animation-delay: 200ms; }
.adh-stagger-5 { animation-delay: 250ms; }

/* ═══════════════════════════════════
   FORGE-SPECIFIC OVERRIDES
   Load after tokens.css in Forge only
═══════════════════════════════════ */
[data-product="forge"] {
  --adh-accent-secondary:     #6366F1;   /* Indigo — Forge sub-accent */
  --adh-accent-secondary-bg:  rgba(99, 102, 241, 0.1);
  --adh-log-bg:               #060912;   /* Near-black for terminal */
  --adh-log-info:             #60A5FA;
  --adh-log-success:          #4ADE80;
  --adh-log-warning:          #FCD34D;
  --adh-log-error:            #F87171;
  --adh-log-debug:            #475569;
  --adh-log-timestamp:        #334155;
}