/* ============================================================
   CRIATech · base.css
   Reset, design tokens (:root), tipografía, body
   ============================================================ */

/* -------- Fuentes locales (privacy-first, sin Google Fonts) -- */

/* Space Grotesk — 5 pesos */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-700.woff2') format('woff2');
}

/* JetBrains Mono — 3 pesos */
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-600.woff2') format('woff2');
}

/* -------- Design tokens -------------------------------------- */
:root {
  /* Colores base */
  --ink:        #05070a;
  --ink-2:      #0c1016;
  --ink-3:      #141922;
  --line:          rgba(255,255,255,0.08);
  --line-strong:   rgba(255,255,255,0.16);
  --paper:      #f6f6f4;
  --paper-2:    #ecece8;

  /* Texto */
  --text:         #e9edf2;
  --text-dim:     #8a93a2;
  --text-ink:     #0a0d12;
  --text-ink-dim: #5b6370;

  /* Marca CRIATech */
  --blue:       #1f7bc8;
  --blue-2:     #2a8ae0;
  --blue-3:     #5fb8ff;
  --blue-soft:  rgba(31,123,200,0.14);
  --blue-line:  rgba(31,123,200,0.45);

  /* Semánticos */
  --warn:       #e8b257;
  --ok:         #4ac28a;
  --danger:     #e85f5f;
  --danger-soft: rgba(232,95,95,0.14);
  --danger-line: rgba(232,95,95,0.45);

  /* Acentos por pack (páginas de servicio) */
  --pack-essential:     #4ac28a;
  --pack-essential-soft: rgba(74,194,138,0.14);
  --pack-pyme:          #2a8ae0;
  --pack-pyme-soft:     rgba(42,138,224,0.14);
  --pack-advanced:      #a374e8;
  --pack-advanced-soft: rgba(163,116,232,0.14);
  --pack-dpo:           #e8a557;
  --pack-dpo-soft:      rgba(232,165,87,0.14);

  /* Layout */
  --max-w: 1280px;
  --pad-x: 40px;

  /* Clip-path octagonal (sello CRIATech) */
  --clip-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --clip-md: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --clip-lg: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  --clip-xl: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}

/* -------- Reset ---------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

ul, ol { list-style: none; }

/* Utilidad mono */
.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-feature-settings: 'ss01';
}

/* Selección */
::selection {
  background: var(--blue-soft);
  color: var(--blue-3);
}

/* Scrollbar oscura */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* Foco accesible */
:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 2px;
}