/* Mago Systems — capa de marca sobre el sistema Nocturne.
   Paleta del brandbook: Midnight Navy 60% · Paper White 30% · Slate 8% · Gold 2% (solo acentos y estados). */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --navy: #0F1E3D;
  --slate: #5B6575;
  --paper: #F3F4F7;
  --gold: #C9A24B;

  --color-bg: var(--paper);
  --color-surface: #FFFFFF;
  --color-text: var(--navy);
  --color-accent: var(--navy);
  --color-divider: color-mix(in srgb, var(--navy) 14%, transparent);

  /* Rampa neutra invertida para fondo claro: 100 = más oscuro */
  --color-neutral-100: #0F1E3D;
  --color-neutral-200: #23314F;
  --color-neutral-300: #3A4660;
  --color-neutral-400: #4A5570;
  --color-neutral-500: #5B6575;
  --color-neutral-600: #8A93A3;
  --color-neutral-700: #B5BCC8;
  --color-neutral-800: #DDE1E8;
  --color-neutral-900: #ECEEF2;

  --color-accent-100: #F3F4F7;
  --color-accent-300: var(--gold);
  --color-accent-400: #23314F;
  --color-accent-700: var(--gold);
  --color-accent-800: var(--navy);

  --color-section: var(--navy);

  --font-heading: "Schibsted Grotesk", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --shadow-sm: 0 0 0 1px #E1E4EA, 0 1px 2px rgba(15, 30, 61, 0.04);
  --shadow-md: 0 0 0 1px #D3D8E0, 0 8px 24px rgba(15, 30, 61, 0.10);
  --shadow-lg: 0 0 0 1px #C5CBD5, 0 16px 40px rgba(15, 30, 61, 0.14);
}

body { background: var(--paper); color: var(--navy); }
h1, h2, h3 { letter-spacing: -0.02em; }

/* Bloques en navy: los tokens se redefinen dentro y todo lo de adentro se adapta */
.on-navy {
  --color-text: #F3F4F7;
  --color-accent: var(--gold);
  --color-surface: #16274A;
  --color-divider: color-mix(in srgb, #F3F4F7 16%, transparent);
  --color-neutral-300: #C9CFDB;
  --color-neutral-500: #9AA3B5;
  --color-neutral-600: #6B7690;
  --color-neutral-800: #2A3A5C;
  color: var(--color-text);
}

/* Botones: primario sólido navy, dorado solo en el llamado sobre navy */
.btn { font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-sm); }
.btn-primary { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn-primary:hover { background: #23314F; color: var(--paper); }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: #D6B467; }
.btn-secondary { background: #FFFFFF; }

/* Etiquetas y datos técnicos en mono */
.eyebrow, .card-kicker, .card-meta, .table th, .mono {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.eyebrow { font-size: 11px; text-transform: uppercase; color: var(--slate); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--gold); }
.card-kicker { color: var(--slate); }
.tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.input { background: #FFFFFF; }

/* Logotipo MAGO / SYSTEMS */
.wordmark { margin-right: auto; display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1; color: var(--navy); text-decoration: none; }
.wordmark-top { font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; text-align: center; }
.wordmark-rule { height: 2px; background: var(--gold); margin: 4px 0 4px; }
.wordmark-bottom { font-family: var(--font-body); font-weight: 500; font-size: 7.5px; letter-spacing: 0.62em; margin-right: -0.62em; text-align: center; }

/* El texto mixto con variables se partía en columnas */
.card-meta { display: block; color: var(--slate); font-size: 11px; }