/* COPIA de https://sebs.mx/brand/tokens.css · 2026-10-02 · no editar aquí, actualizar con scripts/publish.py de la skill sebs-brand */
/* ===================================================================
   SEBS — Design tokens
   Identidad SEBS v1.1 · capa 0 · servido en https://sebs.mx/brand/tokens.css

   Regla no negociable: --sebs-signal es SEÑAL, nunca SUPERFICIE.
   ~1-2% del área visible. Nunca fondo de nav, hero, card o sección.
   Ver references/color.md §3.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Paleta base ---- */
  --technical-white: #FFFFFF;
  --graphite: #111317;
  --graphite-raised: #1A1D22;   /* superficie secundaria dentro de dark */
  --alloy: #6B6F76;
  --alloy-light: #8E939B;       /* texto secundario sobre dark — 6.02:1 */
  --mist: #E5E7EB;
  --divider-dark: #2A2D33;

  /* ---- Señal ---- */
  --sebs-signal: #E30613;
  --sebs-signal-hover: #B80510;                  /* 80% */
  --sebs-signal-light: #FF3B47;                  /* señal como texto sobre dark — 5.28:1 */
  --sebs-signal-tint: rgba(227, 6, 19, 0.12);    /* solo estados */
  --sebs-signal-tint-soft: rgba(227, 6, 19, 0.06);
  --on-signal: #FFFFFF;                          /* texto sobre la señal; un acento claro lo cambia a grafito */

  /* ---- Acentos de proyecto (heredan la regla de señal) ----
     Un proyecto redefine --sebs-signal a uno de estos en su project.css.
     Registro de quién usa cuál: references/subbrands.md §5. */
  --electric-blue: #2563EB;
  --cyber-teal: #00BFA6;
  --engine-yellow: #FFC107;
  --violet-core: #7C3AED;
  --copper: #FF6B35;

  /* ---- Tipografía ---- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ---- Espaciado (base 4px) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --space-6xl: 128px;

  /* ---- Radios ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 9999px;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --grid-columns: 12;
  --gutter: 24px;
  --margin-min: 24px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 150ms;
  --dur-component: 250ms;
  --dur-section: 400ms;

  /* ---- Superficie por defecto: light ---- */
  --surface: var(--technical-white);
  --surface-secondary: var(--mist);
  --text: var(--graphite);
  --text-secondary: var(--alloy);
  --divider: var(--mist);
  --signal-text: var(--sebs-signal);
}

/* ===================================================================
   Superficies como contexto.
   Cualquier sección, panel o card declara la suya; los hijos heredan
   los tokens correctos y funcionan en claro y oscuro sin duplicar CSS.
   =================================================================== */

.surface-light {
  --surface: var(--technical-white);
  --surface-secondary: var(--mist);
  --text: var(--graphite);
  --text-secondary: var(--alloy);
  --divider: var(--mist);
  --signal-text: var(--sebs-signal);
}

.surface-mist {
  --surface: var(--mist);
  --surface-secondary: var(--technical-white);
  --text: var(--graphite);
  --text-secondary: var(--alloy);   /* solo texto grande — 4.08:1 */
  --divider: var(--technical-white);
  --signal-text: var(--sebs-signal);
}

.surface-dark {
  --surface: var(--graphite);
  --surface-secondary: var(--graphite-raised);
  --text: var(--technical-white);
  --text-secondary: var(--alloy-light);
  --divider: var(--divider-dark);
  --signal-text: var(--sebs-signal-light);
}

.surface-light,
.surface-mist,
.surface-dark {
  background: var(--surface);
  color: var(--text);
}

/* ===================================================================
   Base
   =================================================================== */

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  background: var(--surface);
  color: var(--text);
}

code, pre, .mono, .tech-data {
  font-family: var(--font-mono);
}

h1 { font-weight: 800; font-size: 40px; line-height: 48px; letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: 24px; line-height: 32px; }
h4 { font-weight: 600; font-size: 20px; line-height: 28px; }
h5 { font-weight: 500; font-size: 16px; line-height: 24px; }

.small       { font-size: 14px; line-height: 20px; }
.secondary   { color: var(--text-secondary); }
.label       { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; }
.tech-data   { font-size: 12px; line-height: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}