/* ============================================================
   STK Design System — Tokens
   ------------------------------------------------------------
   Fonte única de verdade para cores, tipografia, spacing,
   motion e elevation. Carregar ANTES de main.css/painel.css.
   Tokens existentes (--stk-*) mantidos para backward compat.
   ============================================================ */

:root {
  /* ---------- Color — Brand ---------- */
  --stk-blue-deep: #2739BD;
  --stk-blue-mid: #0C8DEB;
  --stk-blue-bright: #00B2FF;
  --stk-cyan: #00D0E7;
  --stk-green: #00FFC2;

  /* ---------- Color — Neutrals ---------- */
  --stk-dark: #3C3C3B;
  --stk-gray: #DADADA;
  --stk-light: #F6F6F6;
  --stk-white: #FFFFFF;
  --stk-bg-primary: #FFFFFF;
  --stk-bg-dark: #0A0A0A;
  --stk-bg-elevated: #141414;
  --stk-bg-sunken: #060606;

  /* ---------- Color — Text ---------- */
  --stk-text-primary: #3C3C3B;
  --stk-text-secondary: #6B6B6B;
  --stk-text-on-dark: #F6F6F6;
  --stk-text-on-dark-muted: rgba(246, 246, 246, 0.6);
  --stk-text-on-dark-subtle: rgba(246, 246, 246, 0.4);
  --stk-text-on-dark-faint: rgba(246, 246, 246, 0.25);

  /* ---------- Color — Semantic ---------- */
  --stk-success: #00FFC2;
  --stk-success-bg: rgba(0, 255, 194, 0.15);
  --stk-warning: #FFD666;
  --stk-warning-bg: rgba(255, 200, 50, 0.15);
  --stk-error: #FF4444;
  --stk-error-bg: rgba(255, 68, 68, 0.15);
  --stk-error-text: #FF8A8A;
  --stk-info: #00B2FF;
  --stk-info-bg: rgba(0, 178, 255, 0.12);

  /* ---------- Color — Surface (borders, overlays) ---------- */
  --stk-border-subtle: rgba(255, 255, 255, 0.06);
  --stk-border-default: rgba(255, 255, 255, 0.12);
  --stk-border-strong: rgba(255, 255, 255, 0.2);
  --stk-surface-1: rgba(255, 255, 255, 0.03);
  --stk-surface-2: rgba(255, 255, 255, 0.05);
  --stk-surface-3: rgba(255, 255, 255, 0.08);
  --stk-surface-hover: rgba(255, 255, 255, 0.1);

  /* ---------- Gradient ---------- */
  --stk-gradient-brand: linear-gradient(135deg, var(--stk-blue-deep), var(--stk-blue-bright));
  --stk-gradient-accent: linear-gradient(135deg, var(--stk-blue-mid), var(--stk-cyan));
  --stk-gradient-full: linear-gradient(90deg, var(--stk-blue-deep), var(--stk-cyan), var(--stk-green));

  /* ---------- Typography — Family ---------- */
  --stk-font-sans: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --stk-font-serif: Georgia, "Times New Roman", serif;
  --stk-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Typography — Scale (type-fluid) ---------- */
  --stk-font-display: clamp(2.25rem, 6vw, 3.5rem);   /* Hero headlines */
  --stk-font-h1: clamp(1.875rem, 4.5vw, 2.75rem);
  --stk-font-h2: clamp(1.5rem, 4vw, 2.25rem);
  --stk-font-h3: 1.375rem;
  --stk-font-h4: 1.125rem;
  --stk-font-body-lg: 1.0625rem;   /* leitura longa */
  --stk-font-body: 1rem;           /* padrão */
  --stk-font-body-sm: 0.9375rem;
  --stk-font-caption: 0.8125rem;
  --stk-font-micro: 0.75rem;
  --stk-font-tiny: 0.6875rem;

  /* ---------- Typography — Weight ---------- */
  --stk-weight-regular: 400;
  --stk-weight-medium: 500;
  --stk-weight-semibold: 600;
  --stk-weight-bold: 700;
  --stk-weight-black: 800;

  /* ---------- Typography — Line & Tracking ---------- */
  --stk-leading-tight: 1.15;
  --stk-leading-snug: 1.35;
  --stk-leading-normal: 1.5;
  --stk-leading-relaxed: 1.65;
  --stk-tracking-tight: -0.03em;
  --stk-tracking-snug: -0.01em;
  --stk-tracking-normal: 0;
  --stk-tracking-wide: 0.04em;
  --stk-tracking-wider: 0.08em;

  /* ---------- Spacing ---------- */
  --stk-space-3xs: 2px;
  --stk-space-2xs: 4px;
  --stk-space-xs: 4px;
  --stk-space-sm: 8px;
  --stk-space-md: 16px;
  --stk-space-lg: 24px;
  --stk-space-xl: 32px;
  --stk-space-2xl: 48px;
  --stk-space-3xl: 64px;
  --stk-space-4xl: 96px;
  --stk-space-5xl: 128px;

  /* ---------- Radius ---------- */
  --stk-radius-xs: 2px;
  --stk-radius-sm: 4px;
  --stk-radius-md: 8px;
  --stk-radius-lg: 16px;
  --stk-radius-xl: 24px;
  --stk-radius-full: 9999px;

  /* ---------- Elevation (shadows) ---------- */
  --stk-elevation-0: none;
  --stk-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.2);
  --stk-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.25);
  --stk-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.35);
  --stk-elevation-4: 0 16px 40px rgba(0, 0, 0, 0.45);
  --stk-glow-primary: 0 0 24px rgba(0, 178, 255, 0.2);
  --stk-glow-primary-strong: 0 0 40px rgba(0, 178, 255, 0.35);
  --stk-glow-accent: 0 0 16px rgba(0, 208, 231, 0.15);
  --stk-glow-success: 0 0 20px rgba(0, 255, 194, 0.25);

  /* ---------- Motion — Durations ---------- */
  --stk-duration-instant: 80ms;
  --stk-duration-fast: 150ms;
  --stk-duration-base: 250ms;
  --stk-duration-slow: 400ms;
  --stk-duration-slower: 600ms;

  /* ---------- Motion — Easing ---------- */
  --stk-ease-linear: linear;
  --stk-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);       /* UI responsivo */
  --stk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* transições */
  --stk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro delight */
  --stk-ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);       /* exits */

  /* ---------- Z-index layers ---------- */
  --stk-z-base: 1;
  --stk-z-raised: 10;
  --stk-z-sticky: 50;
  --stk-z-header: 100;
  --stk-z-overlay: 200;
  --stk-z-modal: 300;
  --stk-z-toast: 400;

  /* ---------- Layout ---------- */
  --stk-container: 1120px;
  --stk-container-narrow: 720px;
  --stk-container-wide: 1280px;
  --stk-header-h: 64px;

  /* ---------- Focus ring ---------- */
  --stk-focus-ring: 0 0 0 2px var(--stk-cyan);
  --stk-focus-ring-success: 0 0 0 2px var(--stk-green);
}

/* ============================================================
   Reduced motion — respeita preferência do sistema
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --stk-duration-instant: 0ms;
    --stk-duration-fast: 0ms;
    --stk-duration-base: 0ms;
    --stk-duration-slow: 0ms;
    --stk-duration-slower: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Typography utility classes
   Uso: <h1 class="t-display">, <p class="t-caption t-muted">
   ============================================================ */

.t-display {
  font-size: var(--stk-font-display);
  font-weight: var(--stk-weight-black);
  line-height: var(--stk-leading-tight);
  letter-spacing: var(--stk-tracking-tight);
}

.t-h1 {
  font-size: var(--stk-font-h1);
  font-weight: var(--stk-weight-bold);
  line-height: var(--stk-leading-tight);
  letter-spacing: var(--stk-tracking-tight);
}

.t-h2 {
  font-size: var(--stk-font-h2);
  font-weight: var(--stk-weight-bold);
  line-height: var(--stk-leading-snug);
  letter-spacing: var(--stk-tracking-snug);
}

.t-h3 {
  font-size: var(--stk-font-h3);
  font-weight: var(--stk-weight-semibold);
  line-height: var(--stk-leading-snug);
  letter-spacing: var(--stk-tracking-snug);
}

.t-h4 {
  font-size: var(--stk-font-h4);
  font-weight: var(--stk-weight-semibold);
  line-height: var(--stk-leading-snug);
}

.t-body-lg {
  font-size: var(--stk-font-body-lg);
  line-height: var(--stk-leading-relaxed);
}

.t-body {
  font-size: var(--stk-font-body);
  line-height: var(--stk-leading-normal);
}

.t-body-sm {
  font-size: var(--stk-font-body-sm);
  line-height: var(--stk-leading-normal);
}

.t-caption {
  font-size: var(--stk-font-caption);
  line-height: var(--stk-leading-normal);
}

.t-micro {
  font-size: var(--stk-font-micro);
  line-height: var(--stk-leading-snug);
  letter-spacing: var(--stk-tracking-wide);
}

.t-overline {
  font-size: var(--stk-font-tiny);
  font-weight: var(--stk-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--stk-tracking-wider);
  color: var(--stk-text-on-dark-subtle);
}

/* Color/emphasis modifiers */
.t-muted { color: var(--stk-text-on-dark-muted); }
.t-subtle { color: var(--stk-text-on-dark-subtle); }
.t-faint { color: var(--stk-text-on-dark-faint); }
.t-accent { color: var(--stk-cyan); }
.t-success { color: var(--stk-success); }
.t-error { color: var(--stk-error-text); }

.t-gradient {
  background: var(--stk-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Layout primitives — Stack, Cluster, Center
   Uso: <div class="stack-md">, <div class="cluster-sm">
   ============================================================ */

.stack-xs > * + * { margin-top: var(--stk-space-xs); }
.stack-sm > * + * { margin-top: var(--stk-space-sm); }
.stack-md > * + * { margin-top: var(--stk-space-md); }
.stack-lg > * + * { margin-top: var(--stk-space-lg); }
.stack-xl > * + * { margin-top: var(--stk-space-xl); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stk-space-md);
}
.cluster-xs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stk-space-xs); }
.cluster-sm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stk-space-sm); }
.cluster-lg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stk-space-lg); }

/* ============================================================
   Surface utility — cards com tokens consistentes
   ============================================================ */

.surface-1 {
  background: var(--stk-surface-1);
  border: 1px solid var(--stk-border-subtle);
  border-radius: var(--stk-radius-lg);
}

.surface-2 {
  background: var(--stk-surface-2);
  border: 1px solid var(--stk-border-default);
  border-radius: var(--stk-radius-lg);
}

.surface-raised {
  background: var(--stk-bg-elevated);
  border: 1px solid var(--stk-border-default);
  border-radius: var(--stk-radius-lg);
  box-shadow: var(--stk-elevation-2);
}