/* ============================================================
   Área 7 — tokens, base, utilities
   Built on the Draftea DS (Red Hat Display + black surface + neon)
   ============================================================ */

@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-BlackItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  --bg:               #000;
  --surface-0:        #0a0a0a;
  --surface-1:        rgba(251, 251, 251, 0.04);
  --surface-2:        rgba(251, 251, 251, 0.08);
  --surface-3:        rgba(251, 251, 251, 0.10);

  --fill-primary:     #fbfbfb;
  --fill-secondary:   rgba(251, 251, 251, 0.70);
  --fill-tertiary:    rgba(251, 251, 251, 0.50);
  --fill-disabled:    rgba(251, 251, 251, 0.32);

  --hair-1:           rgba(251, 251, 251, 0.08);
  --hair-2:           rgba(251, 251, 251, 0.12);
  --hair-3:           rgba(251, 251, 251, 0.16);
  --hair-4:           rgba(251, 251, 251, 0.24);

  /* Brand accent — tweakable */
  --accent:           #5af7a9;
  --accent-soft:      rgba(90, 247, 169, 0.16);
  --accent-glow:      rgba(90, 247, 169, 0.45);
  --accent-deep:      #1f8a5b;
  --accent-ink:       #001a0e;

  --warn:             #fde047;
  --warn-soft:        rgba(253, 224, 71, 0.18);
  --live:             #f43f5e;
  --live-soft:        rgba(244, 63, 94, 0.18);

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

  --font: 'Red Hat Display', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px var(--accent-glow), 0 0 80px rgba(90,247,169,0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

html, body {
  background: var(--bg);
  color: var(--fill-primary);
  font-family: var(--font);
  font-feature-settings: 'ss01';
  min-height: 100%;
  font-size: 16px;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* ---------- type ---------- */
.eyebrow {
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-muted { color: var(--fill-tertiary); }

.h-display {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}
.h-hero    { font-size: clamp(56px, 12vw, 156px); }
.h-section { font-size: clamp(40px, 6vw, 80px); }
.h-card    { font-size: 28px; }

.body { font-weight: 500; font-size: 16px; line-height: 1.45; color: var(--fill-secondary); }
.body-sm { font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--fill-secondary); }
.label { font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fill-tertiary); }

.num    { font-feature-settings: 'tnum'; letter-spacing: -0.02em; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .container { padding: 0 40px; } }

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4  { gap: 4px; }  .gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }  .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.gap-32 { gap: 32px; } .gap-48 { gap: 48px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 800; font-size: 16px; line-height: 1;
  padding: 18px 28px; border-radius: var(--r-pill);
  transition: transform 120ms ease, background 150ms ease, opacity 150ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 10px 40px -10px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, var(--shadow-glow); }
.btn-ghost {
  background: var(--surface-2);
  color: var(--fill-primary);
  box-shadow: inset 0 0 0 1px var(--hair-3);
}
.btn-ghost:hover { background: var(--surface-3); }
.btn-outline {
  background: transparent;
  color: var(--fill-primary);
  box-shadow: inset 0 0 0 1px var(--hair-3);
}
.btn-outline:hover { background: var(--surface-1); }
.btn-sm { padding: 12px 18px; font-size: 13px; gap: 6px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

/* ---------- chips / pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hair-3);
  font-weight: 700; font-size: 12px; line-height: 1;
  color: var(--fill-secondary);
}
.chip-accent { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(90,247,169,0.35); }
.chip-live { background: var(--live-soft); color: var(--live); box-shadow: inset 0 0 0 1px rgba(244,63,94,0.35); }
.chip-warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(253,224,71,0.35); }

/* ---------- cards / surfaces ---------- */
.card {
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  border-radius: var(--r-lg);
}
.card-elevated {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 1px var(--hair-3), var(--shadow-card);
  border-radius: var(--r-lg);
}

/* ---------- divider ---------- */
.hr { height: 1px; background: var(--hair-2); border: 0; }

/* ---------- helpers ---------- */
.center { display: flex; align-items: center; justify-content: center; }
.muted { color: var(--fill-tertiary); }
.dim { color: var(--fill-secondary); }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

.spin-slow { animation: spin-slow 22s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.pulse-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: var(--live); opacity: 0.4; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.4); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }

.shine {
  position: relative; overflow: hidden;
}
.shine::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine { 50%, 100% { transform: translateX(100%); } }

.fade-in { animation: fadeIn 400ms ease-out both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fade-slide { animation: fadeSlide 450ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--hair-4); }

/* ============================================================
   Real responsive breakpoints
   ============================================================ */
@media (max-width: 799px) {
  .desktop-only { display: none !important; }
  .h-hero { font-size: 48px !important; }
  .h-section { font-size: 32px !important; }
  .container { padding: 0 16px !important; }
  body { overflow-x: hidden; }
  .vivilo-grid,
  .ubic-grid,
  .footer-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 800px) {
  .mobile-only { display: none !important; }
}

/* ============================================================
   Viewport modes (preview/tweaks panel)
   .vp-mobile  → forces 390px stage, simulates phone
   .vp-desktop → full width
   ============================================================ */
.vp-mobile #stage,
.vp-mobile .desktop-only { /* hide desktop pieces */ }
.vp-mobile .desktop-only { display: none !important; }
.vp-desktop .mobile-only { display: none !important; }

.vp-mobile #stage {
  width: 390px;
  margin: 24px auto;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 0 0 12px #0e0e0e, 0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.08);
  border: 1px solid #1a1a1a;
}
.vp-mobile body { background: #050505; }