/* =========================================================================
   NUON · Colors & Type Foundations
   v1.0 · Blueprint Theme
   Use these tokens for all design surfaces. Light + Dark modes share tokens
   via [data-theme="dark"]. Bebas Neue for display ≥40px MAYÚSCULAS only.
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand spectrum — left→right energy journey (cian → rosa) */
  --nuon-cian: #76D6FF;       /* sky cyan — solar / luz */
  --nuon-cian-light: #76D6FF; /* alias kept for backward compat */
  --nuon-azul: #0096FF;       /* infraestructura · primario digital */
  --nuon-indigo: #7A81FF;     /* inteligencia · IA · digital twin */
  --nuon-indigo-light: #7A81FF; /* alias kept for backward compat */
  --nuon-magenta: #D883FF;    /* mercado · transformación */
  --nuon-rosa: #FDBFE8;       /* demanda · personas · EV */

  /* Signature gradient — 5 stops */
  --nuon-gradient: linear-gradient(
    90deg,
    #76D6FF 0%,
    #0096FF 22%,
    #7A81FF 55%,
    #D883FF 82%,
    #FDBFE8 100%
  );
  --nuon-gradient-vertical: linear-gradient(
    180deg,
    #76D6FF 0%,
    #0096FF 22%,
    #7A81FF 55%,
    #D883FF 82%,
    #FDBFE8 100%
  );

  /* INK scale — neutrals with cool blue bias */
  --ink-0:   #FFFFFF;
  --ink-50:  #EEF2F8;
  --ink-100: #DDE5EF;
  --ink-200: #B8C4D8;
  --ink-300: #94A3BD;
  --ink-400: #6B7A96;
  --ink-500: #54637F;
  --ink-600: #3D4E6B;
  --ink-700: #2A3856;
  --ink-800: #1A2340;
  --ink-900: #0D1428;

  /* Blueprint backgrounds */
  --blueprint-dark: #0D1B4B;
  --blueprint-grid-dark: rgba(26, 46, 107, 0.4); /* #1A2E6B @ 40% */
  --blueprint-grid-light: rgba(216, 228, 240, 0.6); /* #D8E4F0 @ 60% */
  --blueprint-grid-step: 32px;

  /* Semantic */
  --info:    #0096FF;
  --success: #12C4BB;
  --warning: #F7B32B;
  --danger:  #FF5C7A;

  /* Light mode mapping (default) */
  --bg-page: var(--ink-0);
  --bg-panel: var(--ink-50);
  --bg-elevated: var(--ink-0);
  --bg-input: var(--ink-50);

  --fg-1: var(--ink-800); /* primary text / titles */
  --fg-2: var(--ink-600); /* body */
  --fg-3: var(--ink-400); /* captions / metadata */
  --fg-on-brand: #FFFFFF;

  --border-1: var(--ink-200);
  --border-2: var(--ink-100);
  --divider: var(--ink-100);

  --brand-primary: var(--nuon-azul);
  --brand-accent: var(--nuon-magenta);
  --brand-mono-label: var(--nuon-azul);

  /* Type families */
  --font-display: "Bebas Neue", "Impact", sans-serif;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Menlo", monospace;

  /* Type scale */
  --fs-display: 112px;
  --fs-display-lh: 1.04;
  --fs-display-ls: -0.01em;

  --fs-h1: 44px;  --fs-h1-lh: 1.1;
  --fs-h2: 32px;  --fs-h2-lh: 1.15;
  --fs-h3: 22px;  --fs-h3-lh: 1.3;
  --fs-h4: 18px;  --fs-h4-lh: 1.35;
  --fs-body-lg: 17px; --fs-body-lg-lh: 1.6;
  --fs-body: 15px;     --fs-body-lh: 1.6;
  --fs-caption: 12px;  --fs-caption-lh: 1.45;
  --fs-overline: 11px; --fs-overline-ls: 0.18em;
  --fs-mono: 12px;     --fs-mono-lh: 1.5;

  /* Radius — orgánico pero técnico */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  /* Shadows — sticker + elevated */
  --shadow-sticker: 0 0 0 8px #FFFFFF, 0px 12px 24px -8px rgba(13, 27, 75, 0.25);
  --shadow-card: 0 1px 2px rgba(13, 20, 40, 0.04), 0 8px 24px -12px rgba(13, 20, 40, 0.12);
  --shadow-elevated: 0 12px 40px -12px rgba(13, 20, 40, 0.18);
  --shadow-glow-cian: 0 0 32px -4px rgba(0, 150, 255, 0.4);

  /* Motion — sereno, no nervioso */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* Dark blueprint mode */
[data-theme="dark"] {
  --bg-page: var(--blueprint-dark);
  --bg-panel: rgba(26, 46, 107, 0.35);
  --bg-elevated: rgba(26, 46, 107, 0.55);
  --bg-input: rgba(13, 27, 75, 0.6);

  --fg-1: #FFFFFF;
  --fg-2: rgba(255, 255, 255, 0.78);
  --fg-3: rgba(184, 196, 216, 0.65);
  --fg-on-brand: #FFFFFF;

  --border-1: rgba(122, 177, 255, 0.18);
  --border-2: rgba(122, 177, 255, 0.10);
  --divider: rgba(122, 177, 255, 0.14);

  --brand-mono-label: #76D6FF; /* visible cian on dark */
}

/* ---------- Blueprint background utilities ---------- */
.bp-grid-dark {
  background-color: var(--blueprint-dark);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(122, 177, 255, 0.08), transparent 70%),
    linear-gradient(var(--blueprint-grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-dark) 1px, transparent 1px);
  background-size: 100% 100%, var(--blueprint-grid-step) var(--blueprint-grid-step), var(--blueprint-grid-step) var(--blueprint-grid-step);
}

.bp-grid-light {
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0, 150, 255, 0.04), transparent 70%),
    linear-gradient(var(--blueprint-grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-light) 1px, transparent 1px);
  background-size: 100% 100%, var(--blueprint-grid-step) var(--blueprint-grid-step), var(--blueprint-grid-step) var(--blueprint-grid-step);
}

/* ---------- Semantic typographic styles ---------- */
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--fs-display-lh);
  letter-spacing: var(--fs-display-ls);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h1 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h1); line-height: var(--fs-h1-lh); color: var(--fg-1); }
.t-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--fs-h2-lh); color: var(--fg-1); }
.t-h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); line-height: var(--fs-h3-lh); color: var(--fg-1); }
.t-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--fs-h4-lh); color: var(--fg-1); }
.t-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--fs-body-lg-lh); color: var(--fg-2); }
.t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--fs-body-lh); color: var(--fg-2); }
.t-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); line-height: var(--fs-caption-lh); color: var(--fg-3); }

.t-overline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-overline);
  letter-spacing: var(--fs-overline-ls);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  line-height: var(--fs-mono-lh);
  color: var(--brand-mono-label);
  letter-spacing: 0.04em;
}
.t-mono-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* Gradient text */
.t-gradient {
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mono brackets — [ thing ] */
.t-mono-bracket::before { content: "[ "; opacity: 0.7; }
.t-mono-bracket::after  { content: " ]"; opacity: 0.7; }