/* Veil — design tokens & base styles
   --------------------------------------------------------------
   Dark-mode only. All values use oklch where chroma matters.
*/

:root {
  /* surfaces */
  --veil-bg:          oklch(0.14 0.006 270);
  --veil-bg-deep:     oklch(0.10 0.005 270);
  --veil-surface:     oklch(0.19 0.008 270);
  --veil-surface-hi:  oklch(0.23 0.010 270);
  --veil-hairline:    oklch(0.28 0.010 270 / 0.6);
  --veil-hairline-hi: oklch(0.36 0.012 270 / 0.7);

  /* text */
  --veil-text:        oklch(0.965 0.005 270);
  --veil-text-soft:   oklch(0.85 0.008 270);
  --veil-muted:       oklch(0.62 0.012 270);
  --veil-subtle:      oklch(0.44 0.012 270);
  --veil-faint:       oklch(0.32 0.010 270);

  /* accents — share chroma 0.14, vary hue */
  --veil-blue:        oklch(0.74 0.14 248);
  --veil-blue-soft:   oklch(0.74 0.14 248 / 0.18);
  --veil-violet:      oklch(0.62 0.17 295);
  --veil-violet-soft: oklch(0.62 0.17 295 / 0.20);
  --veil-cyan:        oklch(0.82 0.12 200);
  --veil-cyan-soft:   oklch(0.82 0.12 200 / 0.18);

  /* type — League Spartan everywhere; Inter only for long-form body */
  --veil-font-display: "League Spartan", -apple-system, system-ui, sans-serif;
  --veil-font-ui:      "League Spartan", -apple-system, system-ui, sans-serif;
  --veil-font-mono:    "League Spartan", -apple-system, system-ui, sans-serif;
  --veil-font-body:    "Inter", -apple-system, system-ui, sans-serif;

  /* spacing scale (8-pt with half-step) */
  --v-1:  4px;
  --v-2:  8px;
  --v-3: 12px;
  --v-4: 16px;
  --v-5: 20px;
  --v-6: 24px;
  --v-7: 32px;
  --v-8: 48px;

  /* radii */
  --r-1:  6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 18px;
  --r-5: 22px;
  --r-6: 28px;

  /* shadows / glows */
  --glow-blue:   0 0 0 1px oklch(0.74 0.14 248 / 0.35),
                 0 0 24px -4px oklch(0.74 0.14 248 / 0.35);
  --glow-violet: 0 0 0 1px oklch(0.62 0.17 295 / 0.35),
                 0 0 28px -4px oklch(0.62 0.17 295 / 0.40);
  --glow-cyan:   0 0 0 1px oklch(0.82 0.12 200 / 0.30),
                 0 0 22px -6px oklch(0.82 0.12 200 / 0.35);
}

/* --- base --- */
.veil-app {
  font-family: var(--veil-font-ui);
  font-weight: 500;
  color: var(--veil-text);
  background: var(--veil-bg);
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.veil-app * { box-sizing: border-box; }
.veil-app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.veil-app input, .veil-app textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; }

/* ambient noir gradient — sits behind every screen */
.veil-ambient {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.veil-ambient::before, .veil-ambient::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.55;
}
.veil-ambient::before {
  width: 320px; height: 320px; top: -120px; right: -80px;
  background: oklch(0.62 0.17 295 / 0.45);
}
.veil-ambient::after {
  width: 260px; height: 260px; bottom: -100px; left: -100px;
  background: oklch(0.55 0.13 248 / 0.45);
}

/* meta text used throughout — League Spartan, tight uppercase */
.veil-meta {
  font-family: var(--veil-font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--veil-muted);
  text-transform: uppercase;
}

/* long-form body — Inter, lighter weight, comfortable line-height */
.veil-body {
  font-family: var(--veil-font-body);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.55;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

/* numeric values that should align in columns */
.veil-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* fine hairline divider */
.veil-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--veil-hairline), transparent);
}

/* scrollbar — hide */
.veil-scroll::-webkit-scrollbar { display: none; }
.veil-scroll { scrollbar-width: none; }

/* ────────────────────────────────────────────────────────────
   MOBILE: scroll del documento (no interno) para que el browser
   oculte su URL bar; tab bar fijo al viewport; safe-area respetada.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  html, body {
    overflow: visible !important;
    height: auto !important;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
  }

  .veil-viewport,
  .veil-app {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* el .veil-scroll deja de ser scroll context — el body lo es */
  .veil-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    /* respeta el notch arriba y deja sitio al tab bar fijo abajo */
    padding-top: max(env(safe-area-inset-top), 8px) !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  /* tab bar pegado al viewport, no al contenedor */
  .veil-tabbar {
    position: fixed !important;
    bottom: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* header sticky se queda pegado al top real del viewport */
  .veil-header {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }

  /* el ambient gradient absoluto necesita ser fixed para no scrollear */
  .veil-ambient {
    position: fixed !important;
  }
}