/**
 * I.S.T design tokens — Premium dark cinematic AI infrastructure (2026).
 * Locked from the supplied mockups. See /CLAUDE.md and /design-system.md.
 */

:root {
  /* ── Palette ─────────────────────────────────────────────────────── */
  --ist-bg:               #05070D;
  --ist-bg-2:             #0B1020;
  --ist-bg-deep:          #07111F;

  --ist-card:             rgba(11, 16, 32, 0.72);
  --ist-card-elev:        rgba(13, 22, 44, 0.85);
  --ist-card-hover:       rgba(15, 24, 48, 0.88);

  --ist-text:             #FFFFFF;
  --ist-text-2:           #AAB4C8;
  --ist-text-muted:       #6F7B91;
  --ist-text-soft:        rgba(170, 180, 200, 0.5);

  --ist-border:           rgba(255, 255, 255, 0.10);
  --ist-border-strong:    rgba(255, 255, 255, 0.18);
  --ist-border-glow:      rgba(59, 130, 246, 0.45);
  --ist-border-glow-soft: rgba(59, 130, 246, 0.18);

  --ist-blue:             #3B82F6;
  --ist-blue-bright:      #2563FF;
  --ist-blue-dim:         rgba(59, 130, 246, 0.15);
  --ist-cyan:             #22D3EE;
  --ist-cyan-dim:         rgba(34, 211, 238, 0.15);
  --ist-violet:           #8B5CF6;
  --ist-violet-dim:       rgba(139, 92, 246, 0.15);

  --ist-success:          #22C55E;
  --ist-warning:          #F59E0B;
  --ist-error:            #EF4444;

  /* ── Glow values (used in shadows) ──────────────────────────────── */
  --ist-glow-blue:        0 0 24px rgba(59, 130, 246, 0.35);
  --ist-glow-blue-strong: 0 0 32px rgba(59, 130, 246, 0.55);
  --ist-glow-cyan:        0 0 24px rgba(34, 211, 238, 0.30);
  --ist-glow-violet:      0 0 24px rgba(139, 92, 246, 0.30);

  /* ── Typography ─────────────────────────────────────────────────── */
  --ist-font-display: 'Space Grotesk', 'Sora', 'Inter', system-ui, sans-serif;
  --ist-font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ist-font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --ist-font-heading: var(--ist-font-display);

  --ist-text-xs:    0.6875rem;  /* 11 */
  --ist-text-sm:    0.8125rem;  /* 13 */
  --ist-text-base:  1rem;       /* 16 */
  --ist-text-md:    1.125rem;   /* 18 */
  --ist-text-lg:    1.375rem;   /* 22 */
  --ist-text-xl:    1.875rem;   /* 30 */
  --ist-text-2xl:   2.5rem;     /* 40 */
  --ist-text-3xl:   3.375rem;   /* 54 */
  --ist-text-4xl:   4.5rem;     /* 72 */
  --ist-text-5xl:   5.125rem;   /* 82 */

  --ist-lh-display: 1.05;
  --ist-lh-heading: 1.15;
  --ist-lh-body:    1.6;

  --ist-tracking-display: -0.02em;
  --ist-tracking-heading: -0.01em;
  --ist-tracking-body:    0;
  --ist-tracking-eyebrow: 0.16em;

  --ist-fw-regular:  400;
  --ist-fw-medium:   500;
  --ist-fw-semibold: 600;
  --ist-fw-bold:     700;

  /* ── Spacing (8px scale) ────────────────────────────────────────── */
  --ist-space-1: 4px;
  --ist-space-2: 8px;
  --ist-space-3: 12px;
  --ist-space-4: 16px;
  --ist-space-5: 24px;
  --ist-space-6: 32px;
  --ist-space-7: 48px;
  --ist-space-8: 64px;
  --ist-space-9: 80px;
  --ist-space-10: 96px;
  --ist-space-12: 120px;
  --ist-space-14: 140px;
  --ist-space-16: 160px;

  --ist-section-py:        var(--ist-space-12);
  --ist-section-py-tablet: var(--ist-space-9);
  --ist-section-py-mobile: var(--ist-space-7);

  --ist-container:         1280px;
  --ist-container-narrow:   960px;
  --ist-container-text:     720px;

  --pad-x: 32px;

  /* ── Radius ─────────────────────────────────────────────────────── */
  --ist-radius:        14px;
  --ist-radius-sm:      8px;
  --ist-radius-pill:  999px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ist-duration-fast: 160ms;
  --ist-duration-base: 240ms;
  --ist-duration-slow: 480ms;
  --ist-ease:          cubic-bezier(0.32, 0.72, 0, 1);
  --ist-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ist-transition:    all 240ms cubic-bezier(0.32, 0.72, 0, 1);
  --ist-transition-slow: all 480ms cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Backward-compat aliases for older modules (a11y widget, admin.css) */
  --ist-bg-elevated:       var(--ist-bg-2);
  --ist-bg-overlay:        rgba(255, 255, 255, 0.04);
  --ist-bg-overlay-hover:  rgba(255, 255, 255, 0.07);
  --ist-text-secondary:    var(--ist-text-2);
  --ist-text-inverse:      var(--ist-bg);
  --ist-border-hover:      var(--ist-border-glow);
  --ist-border-focus:      var(--ist-blue);
  --ist-accent:            var(--ist-blue);
  --ist-accent-soft:       var(--ist-blue-dim);
  --ist-accent-blue:       var(--ist-blue);
  --ist-accent-blue-dim:   var(--ist-blue-dim);
  --ist-accent-cyan:       var(--ist-cyan);
  --ist-accent-cyan-dim:   var(--ist-cyan-dim);
  --ist-accent-violet:     var(--ist-violet);
  --ist-accent-violet-dim: var(--ist-violet-dim);

  /* paper / black / acid stubs (so any straggling brutalist CSS doesn't fatal) */
  --paper:               var(--ist-bg);
  --black:               var(--ist-text);
  --acid:                var(--ist-blue);
  --line:                var(--ist-border);
  --display:             var(--ist-font-display);
  --mono:                var(--ist-font-mono);
  --t:                   var(--ist-transition);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ist-duration-fast: 0ms;
    --ist-duration-base: 0ms;
    --ist-duration-slow: 0ms;
  }
}

/* ── Reset (no universal border-radius:0 — that was brutalist) ────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--ist-bg);
  color: var(--ist-text);
  font-family: var(--ist-font-body);
  font-size: 16px;
  line-height: var(--ist-lh-body);
  letter-spacing: var(--ist-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}
body { background-color: var(--ist-bg); color: var(--ist-text); margin: 0; }

::selection { background: var(--ist-blue); color: var(--ist-text); }
:focus-visible {
  outline: 2px solid var(--ist-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Pause-motion utility (a11y widget) ──────────────────────────── */
.ist-a11y-pause-motion *,
.ist-a11y-pause-motion *::before,
.ist-a11y-pause-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ── Skip-link ───────────────────────────────────────────────────── */
.ist-skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 100000;
  background: var(--ist-blue-bright); color: var(--ist-text);
  padding: 12px 20px;
  border-radius: var(--ist-radius-pill);
  font-family: var(--ist-font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
}
.ist-skip-link:focus, .ist-skip-link:focus-visible {
  left: 16px; top: 16px;
  outline: 2px solid var(--ist-blue);
  outline-offset: 2px;
}
.ist-a11y-noscript {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--ist-card-elev); color: var(--ist-text);
  padding: 8px 16px;
  border: 1px solid var(--ist-border);
  border-radius: var(--ist-radius-pill);
  text-decoration: underline;
  font-size: 12px;
  z-index: 9998;
}