/* ════════════════════════════════════════════════════════════════════
   public/assets/css/gc-tokens.css

   Guardian Command — design-system TOKENS layer.

   ▶ THE SAFETY CONTRACT (read before editing):

      Every rule in this file MUST start with `.gc-` or be a
      no-side-effect at-rule (`:root`, `@media`, `@keyframes`,
      `@font-face`). NEVER style a bare element (input, table, button,
      a, etc.). NEVER override an existing class name (.modal,
      .stat-card, .section-card, .content-body, .btn, .nav-item, etc.).

      Why: PR #157 used global tag selectors and re-styled existing
      classes. Every per-view layout that assumed defaults broke. We
      reverted (3eab392) and rebuilt with this discipline so the file
      can be deleted without changing ANY rendered pixel.

      The CI gate at scripts/check-gc-namespace.js enforces this rule
      on every `npm test`. A PR that breaks the rule fails CI before
      merge.

   ▶ Adoption pattern:

      Views opt in by adding a `.gc-*` class to a specific element.
      Existing markup is never touched. Migration is per-view, per-
      ship, fully reversible by removing the class.

   ▶ Loaded BEFORE gc-components.css in index.html so the variables
      are resolvable when component rules reference them.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (8px grid) ────────────────────────────────── */
  --gc-space-1:  4px;
  --gc-space-2:  8px;
  --gc-space-3:  12px;
  --gc-space-4:  16px;
  --gc-space-5:  20px;
  --gc-space-6:  24px;
  --gc-space-8:  32px;
  --gc-space-10: 40px;
  --gc-space-12: 48px;
  --gc-space-16: 64px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --gc-radius-card:    12px;
  --gc-radius-control: 8px;
  --gc-radius-chip:    6px;
  --gc-radius-pill:    999px;

  /* ── Type scale ─────────────────────────────────────────────── */
  --gc-text-label:  11px;
  --gc-text-body:   13px;
  --gc-text-h3:     14px;
  --gc-text-h2:     16px;
  --gc-text-h1:     20px;
  --gc-text-h0:     24px;
  --gc-text-kpi:    32px;
  --gc-text-kpi-lg: 40px;

  --gc-tracking-label: 0.06em;
  /* Mono stack token — onboarding/claim-device/notifications referenced
     var(--gc-mono) which never existed (fallback hit plain monospace). */
  --gc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gc-tracking-tight: -0.005em;

  --gc-weight-normal: 400;
  --gc-weight-medium: 500;
  --gc-weight-semi:   600;
  --gc-weight-bold:   700;

  /* ── Motion ──────────────────────────────────────────────────── */
  --gc-dur-fast:    120ms;
  --gc-dur-base:    180ms;
  --gc-dur-slow:    240ms;
  --gc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --gc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Dark surfaces (current default theme) ──────────────────── */
  --gc-surface-base:    #0A0E16;
  --gc-surface-card:    #121A2A;
  --gc-surface-raised:  #18223A;
  --gc-surface-rail:    #0C1220;
  --gc-surface-topbar:  #0F1622;

  /* ── Text on dark surfaces ──────────────────────────────────── */
  --gc-text-strong: #E8EEF8;
  --gc-text-muted:  #B6C0D2;
  --gc-text-dim:    #8A94A6;

  /* ── Accent (electric blue — synced with dashboard.css --accent) */
  --gc-accent:        #2F6BFF;
  --gc-accent-bright: #5B9BFF;
  --gc-accent-deep:   #1B3FB0;
  --gc-accent-glow:   rgba(47, 107, 255, 0.28);
  --gc-accent-rgb:    47, 107, 255;

  /* ── Semantic status colors ─────────────────────────────────── */
  --gc-status-ok:       #22C55E;
  --gc-status-ok-fg:    #86EFAC;
  --gc-status-ok-bg:    rgba(34, 197, 94, 0.12);
  --gc-status-ok-bdr:   rgba(34, 197, 94, 0.40);

  --gc-status-warn:     #F59E0B;
  --gc-status-warn-fg:  #FCD34D;
  --gc-status-warn-bg:  rgba(245, 158, 11, 0.14);
  --gc-status-warn-bdr: rgba(245, 158, 11, 0.45);

  --gc-status-err:      #DC2626;
  --gc-status-err-fg:   #FCA5A5;
  --gc-status-err-bg:   rgba(220, 38, 38, 0.12);
  --gc-status-err-bdr:  rgba(220, 38, 38, 0.45);

  --gc-status-info:     #2563EB;
  --gc-status-info-fg:  #93C5FD;
  --gc-status-info-bg:  rgba(96, 165, 250, 0.12);
  --gc-status-info-bdr: rgba(96, 165, 250, 0.45);

  /* ── Hairline dividers ──────────────────────────────────────── */
  --gc-divider:        rgba(255, 255, 255, 0.06);
  --gc-divider-strong: rgba(255, 255, 255, 0.10);

  /* ── Focus ring ─────────────────────────────────────────────── */
  --gc-focus-ring: 0 0 0 2px var(--gc-surface-base), 0 0 0 4px var(--gc-accent);

  /* ── Skeleton shimmer ───────────────────────────────────────── */
  --gc-skeleton-bg:    rgba(255, 255, 255, 0.04);
  --gc-skeleton-sheen: rgba(255, 255, 255, 0.08);

  /* ── Shadows ────────────────────────────────────────────────── */
  --gc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2);
  --gc-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.25);
  --gc-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.40);
  --gc-shadow-glow: 0 4px 14px var(--gc-accent-glow);
}

/* ── Keyframes used by gc-components.css ─────────────────────────── */
@keyframes gc-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

@keyframes gc-fade-in {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes gc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}

@keyframes gc-spin {
  to { transform: rotate(360deg); }
}

@keyframes gc-slide-in-right {
  0%   { opacity: 0; transform: translateX(16px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* prefers-reduced-motion overrides live in gc-components.css scoped
   to specific .gc-* classes that actually animate. Keeping this file
   to PURE tokens (no selectors that match elements) means deleting
   it has zero rendering effect. */