/*!
 * ZEITH Co. — Canonical Design System
 * Sistema: Frio Elétrico
 * Source of truth: tokens.json
 *
 * Importar em qualquer landing/app/peça ZEITH:
 *   <link rel="stylesheet" href="/path/to/zeith.css">
 *
 * Carregar fontes (Geist + Geist Mono) via Google Fonts:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;700&display=swap">
 */

:root {
  /* === BACKGROUND === */
  --zeith-bg-zero:      #000000;
  --zeith-bg-surface:   #06070A;
  --zeith-bg-elevated:  #0E1218;
  --zeith-bg-ambient:   rgba(31, 169, 224, 0.04);

  /* === TEXT === */
  --zeith-text:           #FFFFFF;
  --zeith-text-secondary: rgba(255, 255, 255, 0.72);
  --zeith-text-tertiary:  rgba(255, 255, 255, 0.55);
  --zeith-text-muted:     rgba(255, 255, 255, 0.35);

  /* === BORDER === */
  --zeith-border:         rgba(255, 255, 255, 0.08);
  --zeith-border-strong:  rgba(255, 255, 255, 0.18);
  --zeith-border-accent:  rgba(31, 169, 224, 0.30);

  /* === ACCENT (cyan elétrico — THE ZEITH blue) === */
  --zeith-accent:         #1FA9E0;
  --zeith-accent-glow:    #7DD3F8;
  --zeith-accent-deep:    #0A4A66;
  --zeith-accent-ambient: rgba(31, 169, 224, 0.12);

  /* === SIGNAL === */
  --zeith-success: #10B981;
  --zeith-warn:    #F59E0B;
  --zeith-error:   #EF4444;
  --zeith-info:    var(--zeith-accent);

  /* === TYPOGRAPHY === */
  --zeith-font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --zeith-font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --zeith-font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* font-size scale */
  --zeith-text-eyebrow: 11px;
  --zeith-text-small:   13px;
  --zeith-text-body:    15px;
  --zeith-text-bodyLg:  17px;
  --zeith-text-lede:    21px;
  --zeith-text-h3:      28px;
  --zeith-text-h2:      36px;
  --zeith-text-h1:      48px;
  --zeith-text-display: 64px;
  --zeith-text-hero:    96px;

  /* font-weight */
  --zeith-weight-regular:  400;
  --zeith-weight-medium:   500;
  --zeith-weight-semibold: 600;
  --zeith-weight-bold:     700;
  --zeith-weight-heavy:    800;
  --zeith-weight-black:    900;

  /* letter-spacing */
  --zeith-tracking-display:  -0.025em;
  --zeith-tracking-heading:  -0.02em;
  --zeith-tracking-h3:       -0.01em;
  --zeith-tracking-body:     0;
  --zeith-tracking-bodyWide: 0.04em;
  --zeith-tracking-mono:     0.18em;
  --zeith-tracking-eyebrow:  0.20em;

  /* line-height */
  --zeith-leading-tight:  1.0;
  --zeith-leading-snug:   1.15;
  --zeith-leading-normal: 1.5;
  --zeith-leading-loose:  1.65;

  /* === SPACING (8px base) === */
  --zeith-space-xs:   4px;
  --zeith-space-s:    8px;
  --zeith-space-m:    12px;
  --zeith-space-ml:   16px;
  --zeith-space-l:    24px;
  --zeith-space-xl:   32px;
  --zeith-space-2xl:  40px;
  --zeith-space-3xl:  48px;
  --zeith-space-4xl:  64px;
  --zeith-space-5xl:  80px;
  --zeith-space-6xl:  96px;
  --zeith-space-7xl:  120px;
  --zeith-space-8xl:  160px;

  /* === RADIUS === */
  --zeith-radius-none:   0;
  --zeith-radius-tiny:   2px;
  --zeith-radius-small:  4px;
  --zeith-radius-medium: 8px;
  --zeith-radius-round:  50%;

  /* === SHADOW === */
  --zeith-glow-soft:     0 0 12px rgba(31, 169, 224, 0.3);
  --zeith-glow-medium:   0 0 20px rgba(31, 169, 224, 0.4);
  --zeith-glow-strong:   0 0 32px rgba(31, 169, 224, 0.5);
  --zeith-elev-1:        0 4px 12px -2px rgba(0, 0, 0, 0.6);
  --zeith-elev-2:        0 16px 32px -8px rgba(0, 0, 0, 0.8);
  --zeith-elev-3:        0 32px 64px -16px rgba(0, 0, 0, 0.9);

  /* === MOTION === */
  --zeith-duration-instant:    100ms;
  --zeith-duration-fast:       200ms;
  --zeith-duration-base:       300ms;
  --zeith-duration-slow:       500ms;
  --zeith-duration-deliberate: 800ms;

  --zeith-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --zeith-ease-inOut:  cubic-bezier(0.65, 0, 0.35, 1);
  --zeith-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
 * Utility classes — apply ZEITH base styles to any element
 * ============================================================ */

.zeith-canvas {
  background: var(--zeith-bg-zero);
  color: var(--zeith-text);
  font-family: var(--zeith-font-body);
  font-size: var(--zeith-text-bodyLg);
  line-height: var(--zeith-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 * Wordmark (ZEITH.CO with cyan dot)
 * <h1 class="zeith-wordmark"><span>ZEITH</span><span class="zeith-wordmark__dot"></span><span>CO</span></h1>
 * ============================================================ */

.zeith-wordmark {
  font-family: var(--zeith-font-display);
  font-weight: var(--zeith-weight-heavy);
  letter-spacing: var(--zeith-tracking-display);
  line-height: var(--zeith-leading-tight);
  color: var(--zeith-text);
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  margin: 0;
}

.zeith-wordmark__dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  border-radius: var(--zeith-radius-round);
  background: var(--zeith-accent);
  box-shadow: var(--zeith-glow-soft);
  margin: 0 0.10em 0.12em 0.10em;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Use modifier for hero scale (96px+) */
.zeith-wordmark--hero { font-size: var(--zeith-text-hero); }
.zeith-wordmark--display { font-size: var(--zeith-text-display); }
.zeith-wordmark--h1 { font-size: var(--zeith-text-h1); }
.zeith-wordmark--h2 { font-size: var(--zeith-text-h2); }

/* ============================================================
 * Tagline (canonical: "EFICIÊNCIA INTELIGENTE PARA NEGÓCIOS.")
 * ============================================================ */

.zeith-tagline {
  font-family: var(--zeith-font-body);
  font-weight: var(--zeith-weight-medium);
  font-size: var(--zeith-text-small);
  letter-spacing: var(--zeith-tracking-bodyWide);
  text-transform: uppercase;
  color: var(--zeith-text);
  line-height: var(--zeith-leading-normal);
}

/* ============================================================
 * Filete (32×2 cyan accent line — assinatura visual)
 * ============================================================ */

.zeith-filete {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--zeith-accent);
  border: none;
  margin: 0;
}

.zeith-filete--long { width: 64px; }
.zeith-filete--short { width: 24px; }

/* ============================================================
 * Eyebrow / Kicker (mono uppercase label)
 * ============================================================ */

.zeith-eyebrow {
  font-family: var(--zeith-font-mono);
  font-size: var(--zeith-text-eyebrow);
  font-weight: var(--zeith-weight-medium);
  letter-spacing: var(--zeith-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--zeith-accent);
}

/* ============================================================
 * Heading scale
 * ============================================================ */

.zeith-h1, .zeith-h2, .zeith-h3 {
  font-family: var(--zeith-font-display);
  color: var(--zeith-text);
  margin: 0;
}
.zeith-h1 { font-size: var(--zeith-text-h1); font-weight: var(--zeith-weight-heavy); letter-spacing: var(--zeith-tracking-heading); line-height: var(--zeith-leading-snug); }
.zeith-h2 { font-size: var(--zeith-text-h2); font-weight: var(--zeith-weight-heavy); letter-spacing: var(--zeith-tracking-heading); line-height: var(--zeith-leading-snug); }
.zeith-h3 { font-size: var(--zeith-text-h3); font-weight: var(--zeith-weight-bold);  letter-spacing: var(--zeith-tracking-h3); line-height: var(--zeith-leading-snug); }

/* ============================================================
 * Body text
 * ============================================================ */

.zeith-body {
  font-family: var(--zeith-font-body);
  font-size: var(--zeith-text-bodyLg);
  font-weight: var(--zeith-weight-regular);
  line-height: var(--zeith-leading-normal);
  color: var(--zeith-text-secondary);
}

.zeith-body--small { font-size: var(--zeith-text-body); }
.zeith-body--lede { font-size: var(--zeith-text-lede); color: var(--zeith-text-secondary); }

/* ============================================================
 * Mono caption (data, status, stamp)
 * ============================================================ */

.zeith-mono {
  font-family: var(--zeith-font-mono);
  font-size: var(--zeith-text-small);
  letter-spacing: var(--zeith-tracking-mono);
  text-transform: uppercase;
  color: var(--zeith-text-tertiary);
}

.zeith-mono--accent { color: var(--zeith-accent); }
.zeith-mono--small  { font-size: var(--zeith-text-eyebrow); }

/* ============================================================
 * Card (default surface)
 * ============================================================ */

.zeith-card {
  background: var(--zeith-bg-surface);
  border: 1px solid var(--zeith-border);
  border-radius: var(--zeith-radius-small);
  padding: var(--zeith-space-l);
  transition: border-color var(--zeith-duration-base) var(--zeith-ease-out);
}

.zeith-card:hover { border-color: var(--zeith-border-strong); }

.zeith-card--accent {
  background: var(--zeith-accent-ambient);
  border-color: var(--zeith-border-accent);
}

/* ============================================================
 * Button (primary CTA)
 * ============================================================ */

.zeith-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--zeith-space-s);
  padding: var(--zeith-space-m) var(--zeith-space-l);
  font-family: var(--zeith-font-body);
  font-size: var(--zeith-text-body);
  font-weight: var(--zeith-weight-semibold);
  letter-spacing: var(--zeith-tracking-bodyWide);
  text-transform: uppercase;
  border-radius: var(--zeith-radius-small);
  border: 1px solid var(--zeith-accent);
  background: var(--zeith-accent);
  color: var(--zeith-bg-zero);
  cursor: pointer;
  transition: all var(--zeith-duration-fast) var(--zeith-ease-out);
}

.zeith-btn:hover {
  background: var(--zeith-accent-glow);
  border-color: var(--zeith-accent-glow);
  box-shadow: var(--zeith-glow-soft);
}

.zeith-btn--ghost {
  background: transparent;
  color: var(--zeith-text);
  border-color: var(--zeith-border-strong);
}

.zeith-btn--ghost:hover {
  background: var(--zeith-accent-ambient);
  border-color: var(--zeith-accent);
  color: var(--zeith-accent);
  box-shadow: none;
}

/* ============================================================
 * Filete decorativo (linhas separadoras com sinal cyan)
 * ============================================================ */

.zeith-divider {
  border: none;
  border-top: 1px solid var(--zeith-border);
  margin: var(--zeith-space-3xl) 0;
}

/* ============================================================
 * Reset/base typography for prose contexts
 * ============================================================ */

.zeith-prose h1 { font-size: var(--zeith-text-h1); font-weight: var(--zeith-weight-heavy); letter-spacing: var(--zeith-tracking-heading); margin-bottom: var(--zeith-space-l); }
.zeith-prose h2 { font-size: var(--zeith-text-h2); font-weight: var(--zeith-weight-heavy); letter-spacing: var(--zeith-tracking-heading); margin-top: var(--zeith-space-3xl); margin-bottom: var(--zeith-space-l); }
.zeith-prose h3 { font-size: var(--zeith-text-h3); font-weight: var(--zeith-weight-bold);  letter-spacing: var(--zeith-tracking-h3); margin-top: var(--zeith-space-xl); margin-bottom: var(--zeith-space-m); }
.zeith-prose p  { font-size: var(--zeith-text-bodyLg); line-height: var(--zeith-leading-normal); color: var(--zeith-text-secondary); margin-bottom: var(--zeith-space-l); }
.zeith-prose a  { color: var(--zeith-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--zeith-duration-fast); }
.zeith-prose a:hover { color: var(--zeith-accent-glow); }
.zeith-prose code { font-family: var(--zeith-font-mono); font-size: 0.9em; background: var(--zeith-bg-elevated); padding: 2px 6px; border-radius: var(--zeith-radius-tiny); color: var(--zeith-accent-glow); }
.zeith-prose blockquote { border-left: 2px solid var(--zeith-accent); padding-left: var(--zeith-space-l); margin: var(--zeith-space-xl) 0; color: var(--zeith-text-secondary); font-style: italic; }

/* ============================================================
 * Focus visible (acessibilidade — WCAG 2.1 AA)
 * ============================================================ */

*:focus-visible {
  outline: 2px solid var(--zeith-accent);
  outline-offset: 2px;
}