/* ============================================================
   KŌGA — Foundations
   Estética japonesa · Ciberseguridad · Negro + carmesí
   ============================================================ */

/* ---------- Web fonts ----------
   Brand display:  Pepi             (uploaded · SemiBold) — used for the KŌGA wordmark + heroes
   Subheads:       Space Grotesk    (Google Fonts · clean technical geometric)
   Body:           IBM Plex Sans    (Google Fonts · humanist, reads well in Spanish)
   Mono / code:    JetBrains Mono   (Google Fonts · terminal / log surfaces)
   Japanese:       Shippori Mincho  (Google Fonts · serif kanji, used as accents)
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Shippori+Mincho+B1:wght@400;500;700;800&display=swap');

@font-face {
  font-family: 'Pepi';
  src: url('fonts/PepiTRIAL-SemiBold-BF676cc171edf1b.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================
     COLOR — Tinta (ink / black) scale
     Núcleo del sistema. Casi nunca usamos blanco puro.
     ========================================================= */
  --ink-000: #000000;   /* absolute black — only for full-bleed voids */
  --ink-050: #07070a;   /* base background — slightly cool, never blue */
  --ink-100: #0d0d10;   /* panel / card background */
  --ink-200: #15151a;   /* raised surface */
  --ink-300: #1d1d23;   /* hover surface */
  --ink-400: #2a2a32;   /* border / divider strong */
  --ink-500: #3a3a44;   /* disabled fg / weak border */
  --ink-600: #5a5a66;   /* tertiary text */
  --ink-700: #8a8a96;   /* secondary text */
  --ink-800: #c8c8cf;   /* primary text on dark */
  --ink-900: #f2f0eb;   /* "paper" — warm off-white, brand light */

  /* =========================================================
     COLOR — Carmesí (crimson) scale — la sangre
     Sampled from the KŌGA oni-mask logo (#981818).
     ========================================================= */
  --crimson-050: #2a0a0a;
  --crimson-100: #4a0f0f;
  --crimson-200: #6d1414;
  --crimson-300: #861818;
  --crimson-400: #981818;   /* logo primary */
  --crimson-500: #b11d1d;   /* default brand red — buttons, links */
  --crimson-600: #c93030;   /* hover */
  --crimson-700: #de4848;   /* active / pressed highlight */
  --crimson-800: #f07070;   /* text-on-dark accents */

  /* =========================================================
     COLOR — Semánticos
     Cybersecurity surfaces need state colors. Keep them muted
     so the carmesí stays loud.
     ========================================================= */
  --signal-safe:    #4ea36b;   /* "Seguro" — verde apagado, no neon */
  --signal-watch:   #c8973a;   /* "Vigilancia" — amber */
  --signal-threat:  #b11d1d;   /* "Amenaza" — usa carmesí */
  --signal-info:    #6c8ec9;   /* "Informativo" — azul acerado, secundario */

  /* Transparent washes for badges, blocks, hover surfaces */
  --wash-crimson:   rgba(177, 29, 29, 0.12);
  --wash-crimson-2: rgba(177, 29, 29, 0.22);
  --wash-paper:     rgba(242, 240, 235, 0.06);
  --wash-paper-2:   rgba(242, 240, 235, 0.12);

  /* =========================================================
     TYPOGRAPHY — Familias
     ========================================================= */
  --font-display: 'Pepi', 'Anton', 'Bebas Neue', 'Helvetica Neue', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-kanji:   'Shippori Mincho B1', 'Noto Serif JP', serif;

  /* =========================================================
     TYPOGRAPHY — Escala (escala mayor 1.250)
     ========================================================= */
  --fs-12: 0.75rem;   /* micro / labels */
  --fs-14: 0.875rem;  /* caption */
  --fs-16: 1rem;      /* body */
  --fs-18: 1.125rem;  /* body-lg */
  --fs-20: 1.25rem;   /* h6 */
  --fs-24: 1.5rem;    /* h5 */
  --fs-30: 1.875rem;  /* h4 */
  --fs-38: 2.375rem;  /* h3 */
  --fs-48: 3rem;      /* h2 */
  --fs-64: 4rem;      /* h1 */
  --fs-96: 6rem;      /* display */
  --fs-128: 8rem;     /* hero */

  /* =========================================================
     SPACING — base 4px
     ========================================================= */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* =========================================================
     RADII — minimal. Most surfaces are square or 2px sharp.
     ========================================================= */
  --r-0: 0px;
  --r-1: 2px;     /* default — chips, inputs, cards */
  --r-2: 4px;     /* buttons */
  --r-3: 8px;     /* modals */
  --r-full: 9999px;

  /* =========================================================
     BORDERS — hairlines, mostly 1px crimson or ink-400
     ========================================================= */
  --bd-hair:    1px solid var(--ink-400);
  --bd-hair-2:  1px solid var(--ink-300);
  --bd-crimson: 1px solid var(--crimson-500);
  --bd-paper:   1px solid var(--wash-paper-2);

  /* =========================================================
     SHADOWS — quiet. The brand is dark, depth comes from
     contrast, not from drop-shadows. Used sparingly.
     ========================================================= */
  --sh-0: none;
  --sh-1: 0 1px 0 0 rgba(0,0,0,0.5);
  --sh-2: 0 8px 24px -8px rgba(0,0,0,0.6), 0 0 0 1px var(--ink-400);
  --sh-3: 0 24px 64px -16px rgba(0,0,0,0.8), 0 0 0 1px var(--ink-400);
  --sh-glow-crimson: 0 0 0 1px var(--crimson-500), 0 0 24px -4px rgba(177,29,29,0.4);

  /* Motion */
  --ease-blade: cubic-bezier(0.7, 0, 0.2, 1);  /* sharp like a katana cut */
  --ease-smoke: cubic-bezier(0.4, 0, 0.2, 1);  /* slower, ambient */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* ============================================================
   SEMANTIC ROLES
   Use these in product code; never reference --crimson-500
   directly from a component unless it's truly brand-meaningful.
   ============================================================ */
:root {
  --bg:            var(--ink-050);
  --bg-panel:      var(--ink-100);
  --bg-raised:     var(--ink-200);
  --bg-hover:      var(--ink-300);

  --fg:            var(--ink-800);
  --fg-strong:     var(--ink-900);
  --fg-muted:      var(--ink-700);
  --fg-faint:      var(--ink-600);
  --fg-disabled:   var(--ink-500);

  --bd:            var(--ink-400);
  --bd-strong:     var(--ink-500);

  --accent:        var(--crimson-500);
  --accent-strong: var(--crimson-400);
  --accent-hover:  var(--crimson-600);
  --on-accent:     var(--ink-900);
}

/* ============================================================
   ELEMENT DEFAULTS  (h1..h6, p, code, kbd, etc.)
   Pair with `body { background: var(--bg); color: var(--fg); }`
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero / display — for landing, decks, big moments */
.kg-display {
  font-family: var(--font-display);
  font-size: var(--fs-128);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-strong);
}

h1, .kg-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0 0 var(--sp-6);
}

h2, .kg-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-48);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 0 0 var(--sp-5);
}

h3, .kg-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-30);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 0 0 var(--sp-4);
}

h4, .kg-h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-24);
  line-height: 1.2;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 0 0 var(--sp-3);
}

h5, .kg-h5 {
  font-family: var(--font-heading);
  font-size: var(--fs-20);
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 0 0 var(--sp-2);
}

/* Eyebrow / label / kicker — used a lot in cyber dashboards */
.kg-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.kg-eyebrow-crimson {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

p, .kg-p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}

.kg-lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--ink-800);
  font-weight: 300;
}

small, .kg-small {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

code, kbd, samp, .kg-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--crimson-800);
  background: var(--ink-200);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
  border: 1px solid var(--ink-400);
}

/* Kanji accent — usado en hero o como decoración */
.kg-kanji {
  font-family: var(--font-kanji);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.05em;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-blade),
              color var(--dur-fast) var(--ease-blade);
}
a:hover {
  color: var(--crimson-600);
  border-bottom-color: var(--crimson-600);
}