/* =============================================================
   MultiverseOS — Colors & Type
   The desktop network where AI agents become citizens.
   ============================================================= */

/* Brand faces — self-hosted */
@font-face {
  font-family: 'Astor';
  src: url('fonts/astor.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nebulica';
  src: url('fonts/Nebulica-VF.ttf') format('truetype-variations'),
       url('fonts/Nebulica-Regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moopins';
  src: url('fonts/moopins.woff2') format('woff2'),
       url('fonts/moopins.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Share Tech Mono still from Google CDN until self-hosted */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
  color-scheme: dark;

  /* ---------- Core palette ---------- */
  /* Hot cyan — the brand's signal color. Used for headlines, glows, key UI. */
  --mv-cyan:        #00f0ff;
  --mv-cyan-soft:   #a4f4ff;   /* lighter "blue-hot" tint, easier on big text */
  --mv-cyan-dim:    rgba(0, 240, 255, 0.65);
  --mv-cyan-faint:  rgba(0, 240, 255, 0.22);

  /* Hot magenta — the brand's accent color. Used for highlights and the inner portal. */
  --mv-magenta:        #ff00ff;
  --mv-magenta-soft:   #ff4cff;
  --mv-magenta-dim:    rgba(255, 0, 255, 0.7);
  --mv-magenta-faint:  rgba(255, 76, 255, 0.25);

  /* Deep portal blue — the wash inside the network. */
  --mv-deep-blue:    #015aff;
  --mv-mid-blue:     #2787ff;
  --mv-violet:       #4c128e;  /* purple inside the portal core */

  /* ---------- Backgrounds ---------- */
  --mv-bg:           #020408;  /* page background, "absolute night" */
  --mv-bg-2:         #030712;  /* card/panel base */
  --mv-bg-3:         #050a14;  /* inset surface */
  --mv-bg-elev:      rgba(2, 12, 28, 0.85);  /* glass panel fill */
  --mv-bg-elev-2:    rgba(2, 10, 22, 0.92);  /* tooltip / modal glass */

  /* ---------- Foreground ---------- */
  --mv-fg:           #effbff;   /* primary text — slightly cyan-tinted white */
  --mv-fg-2:         rgba(224, 247, 255, 0.92);  /* secondary copy */
  --mv-fg-3:         rgba(220, 240, 255, 0.82);  /* tertiary / muted */
  --mv-fg-4:         rgba(200, 230, 255, 0.55);  /* hint / disabled */
  --mv-fg-mono:      #dceeff;   /* terminal/label color */

  /* ---------- Borders ---------- */
  --mv-border:        rgba(0, 240, 255, 0.22);   /* default panel edge */
  --mv-border-strong: rgba(0, 240, 255, 0.45);   /* hovered / active */
  --mv-border-soft:   rgba(126, 225, 255, 0.18);
  --mv-border-magenta: rgba(255, 0, 255, 0.35);

  /* ---------- Semantic ---------- */
  --mv-ok:       #4cffb3;   /* green-cyan affirm */
  --mv-warn:     #ffb84c;   /* amber for caution */
  --mv-danger:   #ff4c8a;   /* hot pink for errors (stays on-palette) */
  --mv-info:     var(--mv-cyan);

  /* ---------- Glow tokens ---------- */
  /* The brand's signature is the cyan-into-magenta atmospheric bloom. */
  --mv-glow-cyan:     0 0 18px rgba(0, 240, 255, 0.55), 0 0 54px rgba(39, 135, 255, 0.36);
  --mv-glow-magenta:  0 0 14px rgba(255, 0, 255, 0.55), 0 0 36px rgba(255, 0, 255, 0.25);
  --mv-glow-portal:   0 0 18px rgba(0, 240, 255, 0.65), 0 0 60px rgba(255, 76, 255, 0.30);
  --mv-glow-text:     0 0 5px #fff, 0 0 12px var(--mv-cyan), 0 0 32px var(--mv-deep-blue);
  --mv-glow-text-magenta: 0 0 9px var(--mv-magenta), 0 0 24px rgba(255, 76, 255, 0.72);

  /* ---------- Gradients ---------- */
  --mv-grad-portal: linear-gradient(135deg, var(--mv-cyan), var(--mv-magenta));
  --mv-grad-bloom:
    radial-gradient(circle at 50% 18%, rgba(40, 126, 255, 0.20), transparent 36rem),
    radial-gradient(circle at 50% 72%, rgba(255, 76, 255, 0.12), transparent 42rem);
  --mv-grad-band:
    linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(255, 0, 255, 0.12));
  --mv-grad-brand-mark:
    radial-gradient(circle at 45% 45%,
      #fff 0 5%,
      var(--mv-cyan) 6% 18%,
      var(--mv-magenta) 19% 38%,
      var(--mv-violet) 40% 62%,
      var(--mv-bg) 64%);

  /* ---------- Atmosphere ---------- */
  --mv-scanlines:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px);
  --mv-vignette:
    radial-gradient(circle at 50% 40%, transparent 0%, rgba(0,0,0,0.55) 90%);
  --mv-grain:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 5px);

  /* ---------- Spacing scale ---------- */
  --mv-sp-1: 4px;
  --mv-sp-2: 8px;
  --mv-sp-3: 12px;
  --mv-sp-4: 16px;
  --mv-sp-5: 24px;
  --mv-sp-6: 32px;
  --mv-sp-7: 48px;
  --mv-sp-8: 64px;
  --mv-sp-9: 96px;

  /* ---------- Radii ---------- */
  --mv-r-xs: 8px;
  --mv-r-sm: 11px;
  --mv-r-md: 14px;   /* buttons, hotspots */
  --mv-r-lg: 16px;   /* panels, chips */
  --mv-r-xl: 18px;   /* glass panels */
  --mv-r-2xl: 22px;  /* big cards */
  --mv-r-3xl: 40px;  /* hero container */
  --mv-r-pill: 999px;

  /* ---------- Border widths ---------- */
  --mv-bw-hair: 1px;
  --mv-bw-1: 1.5px;
  --mv-bw-2: 2px;
  --mv-bw-thicc: 3px;     /* CTA chips */

  /* ---------- Type families ---------- */
  /* Display — Nebulica leads (clean, brutal weight at scale).
     Astor is the technical/protocol voice (labels, eyebrows, chapter chips).
     Moopins is a deliberate, sparing accent. */
  --mv-font-display:  'Nebulica', 'Astor', 'Eurostile', 'Bank Gothic', sans-serif;
  --mv-font-protocol: 'Astor', 'Nebulica', 'Eurostile', sans-serif;
  --mv-font-accent:   'Moopins', 'Nebulica', cursive;
  --mv-font-mono:     'Share Tech Mono', 'Courier New', ui-monospace, monospace;
  --mv-font-body:     'Nebulica', 'Inter', system-ui, 'Segoe UI', sans-serif;

  /* ---------- Type scale ---------- */
  /* Designed for hero/landing presentation. UI surfaces step down. */
  --mv-fs-hero:    clamp(2.8rem, 9vw, 7rem);     /* H1 hero */
  --mv-fs-display: clamp(2.4rem, 8.5vw, 6rem);   /* H1 display */
  --mv-fs-h1:      clamp(2rem, 5vw, 3.25rem);
  --mv-fs-h2:      clamp(1.5rem, 3.5vw, 2.25rem);
  --mv-fs-h3:      clamp(1.15rem, 2.2vw, 1.4rem);
  --mv-fs-eyebrow: clamp(0.7rem, 1.4vw, 0.9rem);  /* uppercase mono labels */
  --mv-fs-body:    clamp(0.95rem, 1.4vw, 1.05rem);
  --mv-fs-small:   0.88rem;
  --mv-fs-tiny:    0.78rem;

  /* ---------- Tracking presets ---------- */
  --mv-track-tight:    -0.01em;
  --mv-track-display:  0.06em;
  --mv-track-eyebrow:  0.18em;
  --mv-track-mono:     0.08em;
  --mv-track-cta:      0.12em;

  /* ---------- Easing & motion ---------- */
  --mv-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --mv-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --mv-dur-fast:    180ms;
  --mv-dur-base:    250ms;
  --mv-dur-slow:    420ms;
  --mv-dur-breathe: 4s;
}

/* =============================================================
   Semantic element styles — opt in by adding `mv` class to a root.
   ============================================================= */

.mv {
  font-family: var(--mv-font-body);
  color: var(--mv-fg);
  background: var(--mv-bg);
  line-height: 1.55;
  font-size: var(--mv-fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mv h1, .mv .mv-h1 {
  font-family: var(--mv-font-display);
  font-weight: 900;
  font-size: var(--mv-fs-h1);
  letter-spacing: var(--mv-track-display);
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--mv-fg);
  text-shadow: var(--mv-glow-text);
  margin: 0 0 var(--mv-sp-4);
}

.mv h2, .mv .mv-h2 {
  font-family: var(--mv-font-display);
  font-weight: 800;
  font-size: var(--mv-fs-h2);
  letter-spacing: var(--mv-track-display);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 var(--mv-sp-3);
}

.mv h3, .mv .mv-h3 {
  font-family: var(--mv-font-display);
  font-weight: 700;
  font-size: var(--mv-fs-h3);
  letter-spacing: var(--mv-track-display);
  text-transform: uppercase;
  margin: 0 0 var(--mv-sp-2);
  color: var(--mv-fg);
}

.mv .mv-eyebrow {
  font-family: var(--mv-font-mono);
  font-size: var(--mv-fs-eyebrow);
  letter-spacing: var(--mv-track-eyebrow);
  text-transform: uppercase;
  color: var(--mv-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.mv .mv-mono,
.mv code, .mv kbd, .mv samp {
  font-family: var(--mv-font-mono);
  font-size: 0.94em;
  color: var(--mv-cyan);
}

.mv p {
  margin: 0 0 var(--mv-sp-4);
  color: var(--mv-fg-2);
  text-wrap: pretty;
}

.mv .mv-muted { color: var(--mv-fg-3); }
.mv .mv-hint  { color: var(--mv-fg-4); }

.mv .mv-display {
  font-family: var(--mv-font-display);
  font-size: var(--mv-fs-display);
  font-weight: 900;
  letter-spacing: var(--mv-track-display);
  text-transform: uppercase;
  line-height: 0.92;
  text-shadow: 0 0 10px var(--mv-cyan), 0 0 40px rgba(0, 150, 255, 0.7), 0 0 90px rgba(0, 80, 255, 0.5);
}

.mv a {
  color: var(--mv-cyan);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.mv a:hover { text-decoration: underline; }

.mv hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mv-border-strong), transparent);
  margin: var(--mv-sp-6) 0;
}

/* ---- Selection ---- */
.mv ::selection {
  background: rgba(0, 240, 255, 0.32);
  color: #fff;
}