/* =============================================================
   CONNEXION® — Design Tokens
   "Estructuralismo Atmosférico" — Swiss grid + Brutalist soft.
   Claridad sobre estilo. Sistema sobre intuición. Señal sobre ruido.
   ============================================================= */

/* ---------- 1. FONT FACES --------------------------------- */

@font-face {
  font-family: 'PP Neue Machina';
  src: url('./fonts/PPNeueMachina-InktrapBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./fonts/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./fonts/PPNeueMontreal-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archimoto';
  src: url('./fonts/ArchimotoV01-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. COLOR PALETTE ------------------------------ */

:root {
  /* Core duo */
  --black-obsidian: #0a0a0a;   /* primary surface — the void */
  --ghost-shell:    #f5f5f5;   /* primary inverse — the screen */

  /* Neutrals */
  --concrete-dust:  #d9d9d9;   /* secondary surface */
  --steel-grey:     #b5b5b5;   /* mid neutral / dividers */
  --signal-grey:    #6b6b6b;   /* tertiary text */
  --static-grey:    #2a2a2a;   /* near-black panel */

  /* Accent — the only color in the system */
  --pulse-lavender: #8b7cff;   /* signal / activation / hover-state */
  --pulse-lavender-dim: #6a5ee0;

  /* Glass / atmosphere */
  --frost-light:    rgba(245, 245, 245, 0.06);
  --frost-strong:   rgba(245, 245, 245, 0.12);
  --frost-dark:     rgba(10, 10, 10, 0.40);

  /* Semantic — dark mode default (CNNX is dark-first) */
  --bg-1:           var(--black-obsidian);
  --bg-2:           #131313;
  --bg-3:           var(--static-grey);
  --fg-1:           var(--ghost-shell);
  --fg-2:           var(--steel-grey);
  --fg-3:           var(--signal-grey);
  --line-1:         rgba(245, 245, 245, 0.10);
  --line-2:         rgba(245, 245, 245, 0.20);
  --accent:         var(--pulse-lavender);

  /* Inverse (light surfaces) */
  --inv-bg-1:       var(--ghost-shell);
  --inv-bg-2:       var(--concrete-dust);
  --inv-fg-1:       var(--black-obsidian);
  --inv-fg-2:       var(--signal-grey);
  --inv-line-1:     rgba(10, 10, 10, 0.12);

  /* ---------- 3. TYPE ROLES ------------------------------- */

  --font-display:   'PP Neue Machina', 'Archivo Black', 'Helvetica Neue', sans-serif;
  --font-body:      'PP Neue Montreal', 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:      'Archimoto', 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --font-deco:      'Archimoto', 'JetBrains Mono', monospace;

  /* Type scale (rem-based, 16px root) */
  --fs-xxs:  0.6875rem;   /* 11px — labels, system tags */
  --fs-xs:   0.75rem;     /* 12px — caption, deco numbers */
  --fs-sm:   0.875rem;    /* 14px — small body */
  --fs-base: 1rem;        /* 16px — body */
  --fs-md:   1.125rem;    /* 18px — lead body */
  --fs-lg:   1.5rem;      /* 24px — small heading */
  --fs-xl:   2rem;        /* 32px — h3 */
  --fs-2xl:  3rem;        /* 48px — h2 */
  --fs-3xl:  4.5rem;      /* 72px — h1 */
  --fs-4xl:  7rem;        /* 112px — display */
  --fs-5xl:  10.5rem;     /* 168px — hero */

  /* Line heights — tight for display, looser for body */
  --lh-display: 0.92;
  --lh-heading: 1.02;
  --lh-body:    1.45;
  --lh-tight:   1.15;

  /* Letter spacing — Machina runs negative; deco/labels run positive */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body:    0em;
  --tracking-label:   0.12em;     /* uppercase labels */
  --tracking-deco:    0.18em;     /* Archimoto numbers, system tags */

  /* ---------- 4. SPACING & GEOMETRY ---------------------- */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Radii — almost none. The system is square. */
  --radius-0: 0px;
  --radius-1: 2px;        /* hairline rounding for inputs */
  --radius-2: 4px;        /* chips, badges */
  --radius-pill: 999px;   /* status pills only */

  /* Border weights */
  --border-hair: 1px;
  --border-1:    1px;
  --border-2:    2px;

  /* Grid — 12 column, technical */
  --grid-columns: 12;
  --grid-gutter:  24px;
  --grid-margin:  48px;
  --content-max:  1440px;

  /* Shadows — minimal. Mostly inner glass. */
  --shadow-1: 0 1px 0 rgba(245,245,245,0.04) inset, 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 24px 48px -12px rgba(0,0,0,0.6);
  --glass-shadow: inset 0 1px 0 rgba(245,245,245,0.10),
                  inset 0 -1px 0 rgba(10,10,10,0.4),
                  0 30px 60px -20px rgba(0,0,0,0.7);

  /* Motion — calibrated, never bouncy */
  --ease-signal: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-precise: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ---------- 5. SEMANTIC TYPE STYLES --------------------- */

.cnnx-display,
.cnnx h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, var(--fs-5xl));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.cnnx h1, h1.cnnx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, var(--fs-3xl));
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

.cnnx h2, h2.cnnx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, var(--fs-2xl));
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  margin: 0;
}

.cnnx h3, h3.cnnx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  margin: 0;
}

.cnnx h4, h4.cnnx {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-body);
  margin: 0;
}

.cnnx p, p.cnnx, .cnnx-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg-2);
  margin: 0 0 1em;
  text-wrap: pretty;
}

.cnnx-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.cnnx em, em.cnnx { font-style: italic; }

/* Decorative — Archimoto Thin. Use for index numbers, system tags,
   coordinate-style metadata. NEVER for prose. */
.cnnx-deco,
.cnnx-numeric {
  font-family: var(--font-deco);
  font-weight: 100;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-deco);
  text-transform: uppercase;
  color: var(--fg-2);
}

.cnnx-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xxs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.cnnx-mono,
.cnnx code {
  font-family: var(--font-mono);
  font-weight: 100;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  color: var(--fg-1);
}

/* ---------- 6. UTILITY ---------------------------------- */

.cnnx {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cnnx-light { background: var(--inv-bg-1); color: var(--inv-fg-1); }

.cnnx-glass {
  background: var(--frost-light);
  border: 1px solid var(--line-1);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.cnnx-rule {
  border: 0;
  border-top: var(--border-hair) solid var(--line-1);
  margin: var(--space-6) 0;
}

/* The signature slash — used as a verbal marker (/WE ARE ROCKSTARS) */
.cnnx-slash::before { content: '/ '; color: var(--accent); }