/**
 * Tiza Group — design tokens (single source of truth)
 * Sync: scripts/sync-brand-assets.sh
 * Docs: docs/BRAND.md
 * Estilo: TIZA Dark — limpio y coherente
 *
 * Lima = acción / KPI / activo.
 * Morado logo = solo línea de chrome (nav).
 * Sin degradados decorativos, sin blur, sin glow.
 * Radios de instrumento (4–6px; lg 8px). Contenido max ~1080px.
 */
:root {
  color-scheme: dark;

  /* Morado logo (#7C2180). Verde = matiz complementario (+180°), tono suave #77C773. */
  --tiza-purple: #7C2180;
  --tiza-purple-rgb: 124, 33, 128;

  --tiza-accent: #77C773;
  --tiza-accent-soft: #9DD69A;
  --tiza-accent-rgb: 119, 199, 115;

  --tiza-sun: #FFD24A;
  --tiza-sun-soft: #FFE566;
  --tiza-sun-rgb: 255, 210, 74;

  --tiza-purple-light: #FFFFFF;
  --tiza-purple-light-rgb: 255, 255, 255;
  --tiza-purple-dark: #7C2180;
  --tiza-purple-dark-rgb: 124, 33, 128;
  --tiza-purple-muted: var(--tiza-muted);
  --tiza-purple-soft: var(--tiza-text);
  --tiza-purple-bright: var(--tiza-accent);

  --tiza-bg: #0e0e12;
  --tiza-surface: #16161c;
  --tiza-surface-elevated: #1e1e26;
  --tiza-header: #000000;
  --tiza-panel-bg: var(--tiza-surface);
  --tiza-panel-bg-strong: var(--tiza-surface-elevated);
  --tiza-panel-border: rgba(255, 255, 255, 0.12);
  --tiza-hairline: rgba(255, 255, 255, 0.1);
  --tiza-kpi-label: rgba(244, 242, 247, 0.6);
  --tiza-motion-fast: 0.15s;
  --tiza-motion-base: 0.28s;
  --tiza-motion-slow: 2.8s;
  --tiza-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tiza-text: #f4f2f7;
  --tiza-muted: #9e99a8;
  --tiza-border: rgba(255, 255, 255, 0.12);
  --tiza-border-accent: rgba(var(--tiza-purple-rgb), 0.5);
  --tiza-ui-line: var(--tiza-purple);
  --tiza-ui-line-glow: transparent;
  --tiza-ok: #5dd39e;
  --tiza-err: #f07178;
  --tiza-warn: #e6b450;
  --tiza-positive: var(--tiza-accent);
  --tiza-positive-strong: var(--tiza-accent-soft);

  --tiza-chart-1: var(--tiza-accent);
  --tiza-chart-2: var(--tiza-purple);
  --tiza-chart-3: rgba(255, 255, 255, 0.45);
  --tiza-chart-4: var(--tiza-muted);
  --tiza-chart-5: var(--tiza-accent-soft);

  --tiza-purple-a04: rgba(255, 255, 255, 0.04);
  --tiza-purple-a05: rgba(255, 255, 255, 0.05);
  --tiza-purple-a06: rgba(255, 255, 255, 0.06);
  --tiza-purple-a08: rgba(255, 255, 255, 0.08);
  --tiza-purple-a10: rgba(255, 255, 255, 0.1);
  --tiza-purple-a12: rgba(255, 255, 255, 0.12);
  --tiza-purple-a14: rgba(255, 255, 255, 0.14);
  --tiza-purple-a15: rgba(255, 255, 255, 0.15);
  --tiza-purple-a18: rgba(255, 255, 255, 0.18);
  --tiza-purple-a20: rgba(255, 255, 255, 0.2);
  --tiza-purple-a22: rgba(255, 255, 255, 0.22);
  --tiza-purple-a25: rgba(255, 255, 255, 0.25);
  --tiza-purple-a28: rgba(255, 255, 255, 0.28);
  --tiza-purple-a35: rgba(255, 255, 255, 0.35);
  --tiza-purple-a50: rgba(255, 255, 255, 0.5);
  --tiza-purple-light-a15: rgba(255, 255, 255, 0.12);
  --tiza-purple-dark-a12: rgba(255, 255, 255, 0.08);

  --tiza-accent-a12: rgba(var(--tiza-accent-rgb), 0.12);
  --tiza-accent-a18: rgba(var(--tiza-accent-rgb), 0.18);
  --tiza-accent-a25: rgba(var(--tiza-accent-rgb), 0.25);
  --tiza-sun-a12: var(--tiza-accent-a12);
  --tiza-sun-a18: var(--tiza-accent-a18);
  --tiza-sun-a25: var(--tiza-accent-a25);

  /* Instrumento — casi rectos, un solo lenguaje */
  --tiza-radius-sm: 4px;
  --tiza-radius: 6px;
  --tiza-radius-md: 6px;
  --tiza-radius-lg: 8px;
  --tiza-radius-pill: 999px; /* solo chips de estado */

  --tiza-nav-h: 56px;
  --tiza-logo-h: 34px;
  --tiza-logo-max-w: 190px;
  --tiza-logo-pad-x: clamp(16px, 3vw, 28px);
  --tiza-font: "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --tiza-font-display: "Sora", var(--tiza-font);
  --tiza-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display: var(--tiza-font-display);
  --tiza-space-1: 4px;
  --tiza-space-2: 8px;
  --tiza-space-3: 12px;
  --tiza-space-4: 16px;
  --tiza-space-5: 24px;
  --tiza-bg-gradient: none;
  --tiza-content-pad-x: clamp(16px, 3vw, 28px);
  --tiza-content-max: 1080px;

  --purple: var(--tiza-purple);
  --purple-light: var(--tiza-purple-light);
  --purple-dark: var(--tiza-purple-dark);
  --bg: var(--tiza-bg);
  --surface: var(--tiza-surface);
  --surface-elevated: var(--tiza-surface-elevated);
  --border: var(--tiza-border);
  --border-accent: var(--tiza-border-accent);
  --text: var(--tiza-text);
  --muted: var(--tiza-muted);
  --ok: var(--tiza-ok);
  --err: var(--tiza-err);
  --warn: var(--tiza-warn);
  --positive: var(--tiza-positive);
  --chart-1: var(--tiza-chart-1);
  --chart-2: var(--tiza-chart-2);
  --chart-3: var(--tiza-chart-3);
  --chart-4: var(--tiza-chart-4);
  --chart-5: var(--tiza-chart-5);
  --radius: var(--tiza-radius);
  --radius-sm: var(--tiza-radius-sm);
  --radius-md: var(--tiza-radius-md);
  --panel-bg: var(--tiza-panel-bg);
  --panel-border: var(--tiza-panel-border);
  --hairline: var(--tiza-hairline);
  --kpi-label: var(--tiza-kpi-label);
  --nav-h: var(--tiza-nav-h);
}

.flow-kicker,
.sim-calc-kicker,
.sim-det-kicker,
.hero-kicker {
  margin: 0 0 0.12rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tiza-accent);
}
.flow-view .flow-header h1,
.sim-calc-head h3,
.sim-det-head h3 {
  font-family: var(--tiza-font-display);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.tiza-brand-logo {
  height: auto;
  max-height: var(--tiza-logo-h);
  width: auto;
  max-width: var(--tiza-logo-max-w);
  object-fit: contain;
  display: block;
}

.tiza-brand-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--tiza-nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--tiza-logo-pad-x);
  background: var(--tiza-header);
  border-bottom: 1px solid var(--tiza-border);
}

.tiza-brand-bar a {
  display: flex;
  align-items: center;
  line-height: 0;
}

.tiza-footer-center {
  margin: 0;
  padding: 32px clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--tiza-border);
  background: var(--tiza-header);
  text-align: center;
}
.tiza-footer-logo {
  display: block;
  height: auto;
  max-height: 32px;
  width: auto;
  max-width: min(200px, 55vw);
  margin: 0 auto 12px;
  object-fit: contain;
  opacity: 0.9;
}
.tiza-footer-line,
.tiza-footer-sub {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tiza-muted);
  line-height: 1.5;
}
.tiza-footer-sub { margin-top: 8px; }
.tiza-footer-line a,
.tiza-footer-sub a {
  color: var(--tiza-muted);
  text-decoration: none;
}
.tiza-footer-line a:hover,
.tiza-footer-sub a:hover {
  color: var(--tiza-text);
}