/* PerformanceLab — sistema de diseño v1
   Fuentes propias en /fonts, sin dependencias externas de CDN. */

@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  /* Neutros */
  --ink: #12161c;
  --ink-70: #454b54;
  --ink-40: #8a909a;
  --ink-15: #d6dade;
  --paper: #f3f5f2;
  --paper-raised: #ffffff;
  --paper-sunken: #e8ebe6;

  /* Acento de marca */
  --signal: #2e7a9e;
  --signal-strong: #1f5f7e;
  --signal-wash: rgba(46, 122, 158, 0.12);

  /* Estados semánticos (independientes del acento de marca) */
  --moss: #3f7d55;
  --moss-wash: rgba(63, 125, 85, 0.14);
  --amber: #b1741f;
  --amber-wash: rgba(177, 116, 31, 0.16);
  --clay: #a8412e;
  --clay-wash: rgba(168, 65, 46, 0.14);

  /* Alias semánticos */
  --bg: var(--paper);
  --surface: var(--paper-raised);
  --surface-sunken: var(--paper-sunken);
  --text: var(--ink);
  --text-muted: var(--ink-70);
  --text-faint: var(--ink-40);
  --border: var(--ink-15);
  --accent: var(--signal);
  --accent-strong: var(--signal-strong);

  /* Tipografía */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-ui: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Espaciado y forma */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f4;
    --ink-70: #b7bec8;
    --ink-40: #7d8590;
    --ink-15: #2a2f37;
    --paper: #14171c;
    --paper-raised: #1b1f26;
    --paper-sunken: #101317;
    --signal: #62aed0;
    --signal-strong: #8ccae6;
    --signal-wash: rgba(98, 174, 208, 0.16);
    --moss: #6fbb8a;
    --moss-wash: rgba(111, 187, 138, 0.16);
    --amber: #e0a552;
    --amber-wash: rgba(224, 165, 82, 0.16);
    --clay: #dd7a63;
    --clay-wash: rgba(221, 122, 99, 0.16);
  }
}