/* =========================================================================
   CRYZO Design System — tokens
   Fonte única de cores, tipografia, espaçamento, bordas, brilho e movimento.
   Inspirado na estética de TRON: Legacy (2010). Não usa assets do filme.
   Para alterar a marca, edite SOMENTE este arquivo.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---- Superfícies ---------------------------------------------------- */
  --cz-bg: #05080d;              /* fundo da Grid */
  --cz-surface: #0b1722;         /* painéis */
  --cz-surface-raised: #142c3b;  /* painéis elevados, hover de linhas */
  --cz-surface-sunken: #03060a;  /* campos de formulário */

  /* ---- Cor primária: ciano (energia, ação, estado ativo) -------------- */
  --cz-cyan: #00cfff;
  --cz-cyan-soft: #75eaff;
  --cz-cyan-dim: rgb(0 207 255 / 14%);

  /* ---- Cor secundária: violeta CRYZO (herança da paleta original) ----- */
  --cz-violet: #6734eb;          /* preenchimentos e bordas */
  --cz-violet-soft: #a58bff;     /* texto violeta sobre fundo escuro (contraste AA) */
  --cz-violet-deep: #170052;     /* fundo de destaque profundo */
  --cz-violet-dim: rgb(103 52 235 / 18%);

  /* ---- Alerta: laranja (uso pontual) ---------------------------------- */
  --cz-orange: #ff7900;
  --cz-orange-soft: #ffa75a;
  --cz-orange-dim: rgb(255 121 0 / 14%);

  /* ---- Estados semânticos --------------------------------------------- */
  --cz-success: #3ee6a8;
  --cz-danger: #ff5a6e;
  --cz-danger-dim: rgb(255 90 110 / 14%);

  /* ---- Texto ---------------------------------------------------------- */
  --cz-text: #ddf8ff;            /* branco gelo */
  --cz-text-strong: #ffffff;
  --cz-muted: #8caab8;
  --cz-faint: #7a96a4;           /* texto secundário: 5,8:1 sobre painéis (AA) */

  /* ---- Linhas e bordas ------------------------------------------------ */
  --cz-border: rgb(0 207 255 / 28%);
  --cz-border-faint: rgb(0 207 255 / 12%);
  --cz-border-strong: rgb(0 207 255 / 60%);
  --cz-grid-line: rgb(0 207 255 / 5%);

  /* ---- Brilho (usar só em elementos ativos ou relevantes) ------------- */
  --cz-glow: 0 0 8px rgb(0 207 255 / 35%), 0 0 24px rgb(0 207 255 / 12%);
  --cz-glow-strong: 0 0 6px rgb(0 207 255 / 60%), 0 0 18px rgb(0 207 255 / 30%), 0 0 42px rgb(0 207 255 / 14%);
  --cz-glow-violet: 0 0 8px rgb(103 52 235 / 45%), 0 0 24px rgb(103 52 235 / 18%);
  --cz-glow-orange: 0 0 8px rgb(255 121 0 / 40%), 0 0 22px rgb(255 121 0 / 14%);
  --cz-text-glow: 0 0 6px rgb(0 207 255 / 55%), 0 0 18px rgb(0 207 255 / 25%);
  --cz-shadow-deep: 0 30px 80px rgb(0 0 0 / 60%);

  /* ---- Tipografia ----------------------------------------------------- */
  /* Tipografia oficial (aprovada em 2026-10-14):
     Oxanium = títulos, subtítulos e destaques
     IBM Plex Sans = texto corrido
     IBM Plex Mono = dados: datas, números, percentuais, prefixos e códigos */
  --cz-font-display: "Oxanium", "Segoe UI", system-ui, sans-serif;
  --cz-font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --cz-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --cz-text-xs: 0.75rem;     /* 12px — rótulos HUD */
  --cz-text-sm: 0.875rem;    /* 14px */
  --cz-text-md: 1rem;        /* 16px — corpo */
  --cz-text-lg: 1.25rem;     /* 20px */
  --cz-text-xl: 1.625rem;    /* 26px */
  --cz-text-2xl: 2.25rem;    /* 36px */
  --cz-text-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);

  --cz-tracking-display: 0.08em;
  --cz-tracking-label: 0.18em;
  --cz-leading-body: 1.6;
  --cz-leading-tight: 1.15;

  /* ---- Espaçamento ---------------------------------------------------- */
  --cz-space-1: 4px;
  --cz-space-2: 8px;
  --cz-space-3: 12px;
  --cz-space-4: 16px;
  --cz-space-6: 24px;
  --cz-space-8: 32px;
  --cz-space-12: 48px;
  --cz-space-16: 64px;

  /* ---- Bordas --------------------------------------------------------- */
  --cz-radius-sm: 4px;
  --cz-radius-md: 10px;
  --cz-radius-lg: 18px;
  --cz-radius-full: 999px;
  --cz-stroke: 1px;
  --cz-stroke-strong: 2px;

  /* ---- Movimento ------------------------------------------------------ */
  --cz-duration-fast: 140ms;
  --cz-duration-base: 260ms;
  --cz-duration-slow: 500ms;
  --cz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout --------------------------------------------------------- */
  --cz-container: 1240px;
  --cz-gutter: clamp(16px, 4vw, 40px);
  --cz-header-height: 64px;
  --cz-focus-ring: 0 0 0 2px var(--cz-bg), 0 0 0 4px var(--cz-cyan-soft);
}

/* Movimento reduzido: zera durações para todos os componentes */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cz-duration-fast: 0ms;
    --cz-duration-base: 0ms;
    --cz-duration-slow: 0ms;
  }
}