/* ==========================================================================
   Nebulosa · sistema de diseño compartido (landing + creador)
   Lenguaje visual: Anatomy (sólidos isométricos con tonos, placas con etiquetas mono, movimiento calmo)
   con la paleta de Nebulosa. Oscuro por defecto, claro con [data-theme="light"].
   ========================================================================== */
:root {
  color-scheme: dark;
  --navy: #082B5C; --sky: #38B6F0; --mint: #4ED6B0; --amber: #F6C458; --teal: #1B9DB8; --danger: #FF8A80;
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.32, .72, 0, 1);

  --page: #050B16; --page-2: #070F1D; --card: #09131F; --card-2: #0D1A2B; --field: #07101C;
  --text: #9FB3CA; --strong: #EAF3FC; --muted: #6A8099;
  --line: rgba(140, 185, 230, .13); --line-2: rgba(140, 185, 230, .24); --hair: rgba(140, 185, 230, .07);
  --glass: rgba(9, 19, 33, .8);
  --accent: var(--sky); --accent-ink: #031526;
  --btn-bg: #EAF3FC; --btn-ink: #06182B; --btn-hover: #FFFFFF;
  --ok: #4ED6B0; --warn: #F6C458; --amber-text: #F6C458; --live: #4ED6B0;
  --lift: 0 30px 70px -28px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .04) inset;
  --reg: rgba(140, 185, 230, .3);
  --dots: rgba(140, 185, 230, .12);

  /* Figura */
  --int: #DDEBFA; --branch: var(--teal); --navy-k: #0B3470;
  --face-t: #1B3050; --face-l: #0E1E33; --face-m: #0B1829; --face-r: #08131F;
  --mt: 76%; --ml: 32%; --mr: 16%; --edge: #fff;
  --plate-top: #0A1525; --plate-edge: rgba(150, 195, 240, .4);
  --plate-s0: #12233B; --plate-s1: #0C1A2D; --plate-s2: #08121F; --plate-s3: #050C16;
  --shadow-a: .55; --glow-a: .34;
  --gl-feature: #06223F; --gl-addon: #06223F; --gl-integration: #06223F; --gl-branch: #E9F8FC;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #EEF3F7; --page-2: #E7EEF4; --card: #FBFDFE; --card-2: #F3F7FA; --field: #FFFFFF;
  --text: #4D6178; --strong: #0A1E36; --muted: #5E7288; --amber-text: #8A5F00; --live: #0B7A62;
  --line: rgba(10, 40, 80, .11); --line-2: rgba(10, 40, 80, .2); --hair: rgba(10, 40, 80, .06);
  --glass: rgba(251, 253, 254, .86);
  --sky: #1A93C9; --mint: #17A583; --amber: #D99A0B; --teal: #0E7F99; --danger: #C8362B;
  --accent: #0B6FA4; --accent-ink: #fff;
  --btn-bg: #082B5C; --btn-ink: #fff; --btn-hover: #0C3E7E;
  --lift: 0 28px 60px -30px rgba(10, 40, 80, .28), 0 1px 0 #fff inset;
  --reg: rgba(10, 40, 80, .28); --dots: rgba(10, 40, 80, .1);
  --int: #0A2A55; --navy-k: #0B3470;
  --face-t: #FFFFFF; --face-l: #E5EDF3; --face-m: #D9E4ED; --face-r: #C9D7E3;
  --mt: 90%; --ml: 40%; --mr: 66%; --edge: #fff;
  --plate-top: #F4F8FB; --plate-edge: rgba(10, 40, 80, .28);
  --plate-s0: #E8EFF5; --plate-s1: #DCE6EE; --plate-s2: #CBD8E3; --plate-s3: #BCCCDA;
  --shadow-a: .2; --glow-a: .22;
  --gl-feature: #06223F; --gl-addon: #06223F; --gl-integration: #fff; --gl-branch: #fff;
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(60% 50% at 82% -8%, rgba(56, 182, 240, .2), transparent 70%),
    radial-gradient(48% 42% at -6% 38%, rgba(78, 214, 176, .14), transparent 70%),
    var(--page);
}
:root[data-theme="light"] .kc-integration { --kc: #0A2A55; }