/* NEXUS Tab — Design Tokens
 * Adapted from NEXUS Desktop (platform/nexus/webapp/css/tokens.css)
 * Tablet-optimized: larger touch targets, scaled typography, bottom nav
 */

:root {
  /* === Domain Colors === */
  --nx-domain-feelab: #3B82F6;
  --nx-domain-globallogic: #10B981;
  --nx-domain-uat: #F59E0B;
  --nx-domain-fop: #8B5CF6;
  --nx-domain-personal: #EC4899;

  /* === Surface Colors (dark mode, lightness escalation) === */
  --nx-surface-base: #0F1117;
  --nx-surface-raised: #161922;
  --nx-surface-overlay: #1C2030;
  --nx-surface-elevated: #242838;
  --nx-surface-spotlight: #2C3148;

  /* === Accent Colors === */
  --nx-accent-primary: #6C8EEF;
  --nx-accent-secondary: #A78BFA;

  /* === Signal Colors === */
  --nx-signal-critical: #EF6C6C;
  --nx-signal-warning: #F0B95B;
  --nx-signal-success: #5BC78E;
  --nx-signal-info: #5BADE5;

  /* === Text Colors === */
  --nx-text-primary: #F1F5F9;
  --nx-text-secondary: #94A3B8;
  --nx-text-muted: #64748B;
  --nx-text-inverse: #0F172A;
  --nx-text-accent: var(--nx-accent-primary);

  /* === Border Colors === */
  --nx-border-subtle: rgba(255,255,255,0.06);
  --nx-border-default: rgba(255,255,255,0.08);
  --nx-border-strong: rgba(255,255,255,0.12);
  --nx-border-focus: var(--nx-accent-primary);

  /* === Active Domain (set by JS) === */
  --nx-domain-active: #3B82F6;

  /* === Typography — scaled up for tablet viewing distance === */
  --nx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nx-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --nx-type-display: 32px;
  --nx-type-heading: 24px;
  --nx-type-subheading: 18px;
  --nx-type-body: 16px;
  --nx-type-caption: 14px;
  --nx-type-micro: 12px;

  --nx-weight-regular: 400;
  --nx-weight-medium: 500;
  --nx-weight-semibold: 600;
  --nx-weight-bold: 700;

  /* === Spacing (4px base, tablet-adapted) === */
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 24px;
  --nx-space-6: 32px;
  --nx-space-8: 48px;
  --nx-space-12: 64px;

  /* === Touch targets (min 48px per WCAG 2.5.5) === */
  --nx-touch-min: 48px;
  --nx-touch-comfortable: 56px;

  /* === Border Radius === */
  --nx-radius-sm: 6px;
  --nx-radius-md: 8px;
  --nx-radius-lg: 12px;
  --nx-radius-xl: 16px;
  --nx-radius-full: 9999px;

  /* === Elevation === */
  --nx-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --nx-shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --nx-shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  --nx-shadow-xl: 0 20px 25px rgba(0,0,0,0.6);

  /* === Animation === */
  --nx-transition-fast: 100ms ease-out;
  --nx-transition-base: 200ms ease-out;
  --nx-transition-slow: 300ms ease-out;

  /* === Bottom Nav === */
  --nx-nav-height: 64px;
  --nx-nav-icon-size: 24px;
  --nx-nav-label-size: 11px;
  --nx-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Focus Visible === */
*:focus-visible {
  outline: 2px solid var(--nx-border-focus);
  outline-offset: 2px;
}

/* === High Contrast Mode === */
@media (forced-colors: active) {
  :root {
    --nx-border-subtle: CanvasText;
    --nx-border-default: CanvasText;
    --nx-text-primary: CanvasText;
    --nx-text-secondary: CanvasText;
    --nx-surface-base: Canvas;
    --nx-surface-raised: Canvas;
  }
}