/* ──────────────────────────────────────────────────────────────────────────
   BASE — foundation, color system, typography, animations, layout primitives
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Theme tokens ───
   The :root declarations below are the CALM theme (default).
   The [data-theme="system"] block at the bottom of this file overrides them
   with the Solo Leveling cyan-glow palette. */
:root,
:root[data-theme="calm"] {
  /* Backdrop — neutral dark, not blue-tinted */
  --bg-0: #0b0b0d;
  --bg-1: #0f0f12;
  --bg-2: #161618;
  --bg-3: #1d1d20;

  /* Surfaces */
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.10);
  --surface-strong: rgba(255, 255, 255, 0.14);

  /* Borders — neutral, soft */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(255, 255, 255, 0.32);

  /* Text */
  --text: #f1f1f2;
  --text-dim: #a8a8ad;
  --text-mute: #7a7a80;
  --text-faint: #4a4a50;

  /* Brand — white / soft amber. No cyan. */
  --accent: #f1f1f2;
  --accent-2: #ffffff;
  --accent-deep: #a8a8ad;
  --accent-soft: rgba(255, 255, 255, 0.08);

  /* Secondary highlight (used for "pro" / level-up — calm violet) */
  --violet: #b896d8;
  --violet-2: #d9bcf2;
  --violet-deep: #7e62a3;
  --violet-soft: rgba(184, 150, 216, 0.12);

  /* Achievements / XP color */
  --gold: #e8c478;
  --gold-2: #f2d493;
  --gold-deep: #a8742a;
  --gold-soft: rgba(232, 196, 120, 0.14);

  /* Status — natural fitness palette */
  --warn: #e8a861;
  --warn-soft: rgba(232, 168, 97, 0.14);
  --bad: #d97570;
  --bad-soft: rgba(217, 117, 112, 0.14);
  --good: #7dc99a;
  --good-soft: rgba(125, 201, 154, 0.14);

  /* Gradients — calmer */
  --grad-system: linear-gradient(135deg, #f1f1f2 0%, #b896d8 100%);
  --grad-premium: linear-gradient(135deg, #f2d493 0%, #e8a861 100%);
  --grad-fresh: linear-gradient(135deg, #f1f1f2 0%, #a8a8ad 100%);
  --grad-violet: linear-gradient(135deg, #b896d8 0%, #7e62a3 100%);
  --grad-warm: linear-gradient(135deg, #e8a861, #e8c478);
  --grad-gold: linear-gradient(135deg, #e8c478, #a8742a);
  --grad-legendary: linear-gradient(135deg, #e8c478 0%, #b896d8 50%, #f1f1f2 100%);

  /* Ornament toggles — calm mode dims them */
  --ornament-scanlines: 0;          /* 0 = off, 1 = on */
  --ornament-brackets: 0;           /* 0 = hide the [ ] around eyebrows / window titles */
  --ornament-blob-opacity: 0.10;    /* dim the blobs */
  --header-letterspacing: 0.02em;   /* tighter, more humane */
  --header-textcase: none;          /* don't ALL-CAPS the page titles */
  --header-textshadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* ─── SOLO LEVELING / SYSTEM theme ─── */
:root[data-theme="system"] {
  /* Deep space black with navy tint */
  --bg-0: #02050a;
  --bg-1: #050a14;
  --bg-2: #0a121f;
  --bg-3: #121c30;

  /* Surfaces — lower the cyan tint a little so text contrast wins over hue blending */
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(77, 204, 255, 0.10);
  --surface-strong: rgba(15, 28, 48, 0.92);

  --border: rgba(77, 204, 255, 0.22);
  --border-strong: rgba(77, 204, 255, 0.40);
  --border-accent: rgba(125, 86, 224, 0.55);

  /* Text — pure-ish white with a hint of blue. Brighter than before so it
     reads cleanly against cyan-tinted glass and the cyan accent text. */
  --text: #f4faff;
  --text-dim: #c8d8ec;
  --text-mute: #8aa3bd;
  --text-faint: #4b5e76;

  /* Electric cyan */
  --accent: #4dccff;
  --accent-2: #8fe1ff;
  --accent-deep: #1a8fbf;
  --accent-soft: rgba(77, 204, 255, 0.12);

  --violet: #9970ff;
  --violet-2: #b896ff;
  --violet-deep: #5d3aa8;
  --violet-soft: rgba(153, 112, 255, 0.14);

  --gold: #ffce00;
  --gold-2: #ffe25a;
  --gold-deep: #b88f00;
  --gold-soft: rgba(255, 206, 0, 0.14);

  --warn: #ffaa3c;
  --warn-soft: rgba(255, 170, 60, 0.16);
  --bad: #ff5a5a;
  --bad-soft: rgba(255, 90, 90, 0.16);
  --good: #4ce0a8;
  --good-soft: rgba(76, 224, 168, 0.16);

  --grad-system: linear-gradient(135deg, #4dccff 0%, #9970ff 100%);
  --grad-premium: linear-gradient(135deg, #ffce00 0%, #ffaa3c 100%);
  --grad-fresh: linear-gradient(135deg, #4dccff 0%, #1a8fbf 100%);
  --grad-violet: linear-gradient(135deg, #9970ff 0%, #5d3aa8 100%);
  --grad-warm: linear-gradient(135deg, #ffaa3c, #ffce00);
  --grad-gold: linear-gradient(135deg, #ffce00, #b88f00);
  --grad-legendary: linear-gradient(135deg, #4dccff 0%, #9970ff 33%, #ffce00 100%);

  --ornament-scanlines: 1;
  --ornament-brackets: 1;
  --ornament-blob-opacity: 0.32;
  --header-letterspacing: 0.20em;
  --header-textcase: uppercase;
  --header-textshadow: 0 0 24px rgba(77, 204, 255, 0.30);
}

:root {
  /* Type — shared across themes */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-display: "Orbitron", "Rajdhani", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;

  /* Geometry */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows + glows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
  --shadow: 0 10px 30px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 24px rgba(77, 204, 255, 0.35), 0 0 60px rgba(77, 204, 255, 0.15);
  --shadow-violet: 0 0 24px rgba(153, 112, 255, 0.35), 0 0 60px rgba(153, 112, 255, 0.15);
  --shadow-gold: 0 0 24px rgba(255, 206, 0, 0.35), 0 0 60px rgba(255, 206, 0, 0.18);
  --shadow-inner: inset 0 0 0 1px rgba(77, 204, 255, 0.20);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;

  /* Safe area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Nav */
  --nav-h: 76px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  letter-spacing: -0.005em;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
input, textarea { user-select: text; }
img { display: block; max-width: 100%; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--text); }

/* ─── Backdrop layers ─── */
.bg-gradient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(77, 204, 255, 0.10) 0%, transparent 55%),
    radial-gradient(80% 60% at 10% 110%, rgba(153, 112, 255, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

/* Scanline overlay — only visible in system theme via --ornament-scanlines */
.bg-gradient::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(77, 204, 255, 0.014) 2px,
    rgba(77, 204, 255, 0.014) 4px
  );
  pointer-events: none;
  opacity: var(--ornament-scanlines, 0);
}

.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(110px);
  opacity: var(--ornament-blob-opacity);
  animation: drift 26s ease-in-out infinite;
}
.blob-1 { width: 520px; height: 520px; top: -200px; right: -140px; background: var(--violet); }
.blob-2 { width: 420px; height: 420px; bottom: -160px; left: -120px; animation-delay: -9s; background: var(--gold); }
.blob-3 { width: 300px; height: 300px; top: 40%; left: 50%; animation-delay: -16s; background: var(--accent); opacity: calc(var(--ornament-blob-opacity) * 0.4); }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -28px) scale(1.06); }
  66% { transform: translate(-32px, 36px) scale(0.94); }
}

/* Subtle film grain + scan flicker */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.80  0 0 0 0 1.0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ─── Screen container ─── */
.screen {
  position: fixed; inset: 0; z-index: 2;
  padding-top: var(--safe-top);
  padding-bottom: calc(var(--nav-h) + var(--safe-bot));
  overflow-y: auto; overflow-x: hidden;
  display: none;
  -webkit-overflow-scrolling: touch;
}
.screen.no-nav { padding-bottom: var(--safe-bot); }
.screen.active { display: block; }

.screen.enter { animation: screenIn var(--t-med) var(--ease); }
.screen.exit-left { animation: screenOutLeft var(--t-fast) var(--ease) forwards; }
.screen.enter-right { animation: screenInRight var(--t-med) var(--ease); }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes screenInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes screenOutLeft {
  to { opacity: 0; transform: translateX(-24px); }
}

/* ─── Page wrapper inside a screen ─── */
.page {
  max-width: 580px;
  margin: 0 auto;
  padding: 28px 20px 32px;
  padding-left: max(20px, var(--safe-left));
  padding-right: max(20px, var(--safe-right));
}
.page-full { max-width: none; }

.page-header { margin-bottom: 24px; }
.page-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.14em;
}
:root[data-theme="system"] .page-eyebrow {
  font-family: var(--font-display);
  color: var(--accent);
  letter-spacing: 0.22em;
}
:root[data-theme="system"] .page-eyebrow::before { content: "[ "; opacity: 0.7; }
:root[data-theme="system"] .page-eyebrow::after  { content: " ]"; opacity: 0.7; }

.page-title {
  font-family: var(--font-sans);
  font-size: 28px; font-weight: 700;
  margin: 6px 0 6px;
  letter-spacing: -0.01em; line-height: 1.1;
  color: var(--text);
  text-transform: var(--header-textcase);
  text-shadow: var(--header-textshadow);
}
:root[data-theme="system"] .page-title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.02em;
}

.page-sub { color: var(--text-dim); font-size: 14px; margin: 0; line-height: 1.5; }

/* ─── Typography utilities ─── */
.t-display { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.t-mono { font-variant-numeric: tabular-nums; }
.t-dim { color: var(--text-dim); }
.t-mute { color: var(--text-mute); }
.t-warn { color: var(--warn); }
.t-bad { color: var(--bad); }
.t-good { color: var(--good); }

.h-section {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-mute);
  margin: 24px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.h-section::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
:root[data-theme="system"] .h-section {
  font-family: var(--font-display);
  color: var(--accent);
  letter-spacing: 0.22em;
}
:root[data-theme="system"] .h-section::before { content: "[ "; opacity: 0.7; }
:root[data-theme="system"] .h-section::after {
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 100%);
}

/* System bracket pair — wraps any inline label like [ STATUS ] */
.sys-tag {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.10em;
}
:root[data-theme="system"] .sys-tag {
  font-family: var(--font-display);
  color: var(--accent);
  letter-spacing: 0.22em;
}
:root[data-theme="system"] .sys-tag::before { content: "[ "; opacity: 0.65; }
:root[data-theme="system"] .sys-tag::after  { content: " ]"; opacity: 0.65; }

/* Holographic text shadow — apply to important numbers/headers */
.t-glow { text-shadow: 0 0 12px rgba(77, 204, 255, 0.45); }
.t-violet-glow { text-shadow: 0 0 12px rgba(153, 112, 255, 0.45); }
.t-gold-glow { text-shadow: 0 0 12px rgba(255, 206, 0, 0.45); }

/* ─── Empty states ─── */
.empty {
  text-align: center; padding: 56px 20px;
}
.empty-art {
  width: 76px; height: 76px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.empty p { color: var(--text-dim); margin: 0 0 16px; font-size: 14px; }

/* ─── Scrollbar (desktop) ─── */
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10); border-radius: 4px;
}
.screen::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ─── Spacers ─── */
.spacer-4  { height: 4px; }
.spacer-8  { height: 8px; }
.spacer-12 { height: 12px; }
.spacer-16 { height: 16px; }
.spacer-24 { height: 24px; }
.spacer-32 { height: 32px; }
.spacer-48 { height: 48px; }

/* ─── Universal animations ─── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.7; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.anim-pop { animation: pop 360ms var(--ease-spring); }
.anim-fade-up { animation: fadeInUp 420ms var(--ease); animation-fill-mode: both; }

/* ─── Stagger helper: add to a parent, children fade-up in sequence ─── */
.stagger > * { animation: fadeInUp 420ms var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 30ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 130ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 230ms; }
.stagger > *:nth-child(6) { animation-delay: 280ms; }
.stagger > *:nth-child(7) { animation-delay: 330ms; }
.stagger > *:nth-child(8) { animation-delay: 380ms; }