/* CelesteAI Design System — shared stylesheet for app pages (login, chat, coming-soon, tests).
 * Ported from the claude.ai/design "CelesteAI Design System" project (84004d32): tokens/*.css
 * + the base/navbar/button/glass component classes. Replaces the @whykusanagi/corrupted-theme CDN.
 * The marketing landing (index.html) is intentionally self-contained and does NOT use this file;
 * token VALUES here are kept identical to it so the two never drift.
 * ponytail: one shared file for the pages that share a class vocabulary — not re-inlined per page. */

:root{
  /* Accent — Celeste pink */
  --accent:#d94f90;--accent-light:#e86ca8;--accent-dark:#b61b70;
  /* Secondary neons */
  --purple:#8b5cf6;--purple-light:#a78bfa;--cyan:#00d4ff;--cyan-light:#33e0ff;
  --gold:#f5c451;--gold-light:#ffdd82;--gold-dark:#c99320;
  /* Backgrounds — the void */
  --bg:#0a0612;--bg-secondary:#140c28;--bg-tint:#1a0f38;--overlay:rgba(0,0,0,.85);
  /* Glass surfaces */
  --glass:rgba(20,12,40,.7);--glass-light:rgba(28,18,48,.5);--glass-darker:rgba(12,8,28,.8);
  /* Text */
  --text:#fff;--text-secondary:rgba(255,255,255,.7);--text-tertiary:rgba(255,255,255,.5);--text-disabled:rgba(255,255,255,.3);
  /* Semantic */
  --success:#2ed573;--warning:#ffa502;--error:#ff4757;--info:#00d4ff;
  /* Corruption categories */
  --corruption-magenta:#d94f90;--corruption-purple:#c084fc;--corruption-cyan:#00d4ff;--corruption-red:#ff4757;
  /* Borders (pink-tinted) */
  --border:rgba(217,79,144,.3);--border-hover:rgba(217,79,144,.5);--border-focus:rgba(217,79,144,.7);
  --border-subtle:rgba(255,255,255,.1);--border-solid:#3a2555;--border-solid-light:#5a4575;
  /* Gradients */
  --gradient-accent:linear-gradient(135deg,#d94f90 0%,#b61b70 100%);
  --gradient-purple:linear-gradient(135deg,#8b5cf6 0%,#d94f90 100%);
  --gradient-void:linear-gradient(180deg,#0a0612 0%,#140c28 50%,#1a0f38 100%);
  /* Type */
  --font-base:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'SF Mono','Monaco','Menlo','Consolas','Liberation Mono',monospace;
  /* Radius */
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-full:9999px;
  /* Shadows / glow */
  --shadow-sm:0 2px 8px rgba(217,79,144,.15);--shadow-md:0 4px 16px rgba(217,79,144,.25);
  --shadow-lg:0 8px 32px rgba(217,79,144,.35);--shadow-xl:0 16px 64px rgba(217,79,144,.45);
  --shadow-glass:0 8px 32px rgba(217,79,144,.15),inset 0 0 20px rgba(217,79,144,.05);
  --glow:0 0 20px rgba(217,79,144,.4);--glow-cyan:0 0 20px rgba(0,212,255,.5);--glow-purple:0 0 20px rgba(139,92,246,.5);
  /* Blur */
  --blur-lg:blur(10px);--blur-xl:blur(15px);
  /* Motion */
  --transition-fast:.15s ease;--transition-normal:.3s ease;
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  /* Layout */
  --nav-height:64px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font-family:var(--font-base);font-size:1rem;line-height:1.5;color:var(--text);
  background:var(--gradient-void);background-attachment:fixed;min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:1.2}
h1{font-weight:900;letter-spacing:-.05em}
h2{font-weight:900;letter-spacing:-.05em}
p{margin:0 0 1rem}
a{color:var(--cyan);text-decoration:none;transition:color var(--transition-normal)}
a:hover{color:var(--cyan-light)}
code,pre{font-family:var(--font-mono)}
::selection{background:rgba(217,79,144,.4);color:#fff}
*{scrollbar-width:thin;scrollbar-color:var(--purple) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--purple);border-radius:var(--radius-sm)}
*::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ===== Utilities the app JS relies on ===== */
.hidden{display:none !important}
.shake{animation:celeste-shake .4s ease}
@keyframes celeste-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ===== Layout container ===== */
.container{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}

/* ===== Navbar — identical to the landing (index.html) nav so every page matches ===== */
.nav{position:sticky;top:0;z-index:1000;background:rgba(10,6,18,.95);
  border-bottom:1px solid var(--border-solid);backdrop-filter:var(--blur-xl)}
.nav-inner{max-width:1400px;margin:0 auto;padding:0 2rem;min-height:var(--nav-height);
  display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-brand{font-size:1.25rem;font-weight:700;color:var(--accent);margin:0}
.nav-brand a{color:inherit;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{position:relative;color:var(--text-secondary);font-size:.875rem;font-weight:500;padding:.5rem 0;
  transition:color var(--transition-normal)}
.nav-links a::after{content:"";position:absolute;bottom:-2px;left:0;height:2px;width:0;
  background:var(--accent);transition:width var(--transition-normal)}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.75rem}

/* ===== Brand glitch text (corrupted-text.js animates this) ===== */
.corrupted-text{background:var(--gradient-purple);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:900}

/* ===== Glass surface ===== */
.glass-container{background:var(--glass);border:1px solid var(--border-solid);border-radius:var(--radius-xl);
  backdrop-filter:var(--blur-xl);-webkit-backdrop-filter:var(--blur-xl);box-shadow:var(--shadow-glass)}

/* ===== Buttons ===== */
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-base);font-weight:600;letter-spacing:.025em;line-height:1.2;
  padding:.875rem 1.75rem;font-size:.95rem;border-radius:var(--radius-lg);cursor:pointer;white-space:nowrap;
  border:1px solid var(--border);transition:all var(--transition-normal) var(--ease-bounce)}
.btn-primary{background:var(--gradient-accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-3px);border-color:var(--border-focus);box-shadow:var(--shadow-md),var(--glow)}
.btn-primary:active{transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--text-secondary);border-color:var(--border-solid)}
.btn-secondary:hover{transform:translateY(-3px);background:rgba(217,79,144,.08);color:var(--accent);border-color:var(--accent)}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:.55rem 1.1rem;font-size:.85rem}

/* ===== Badge ===== */
.badge{display:inline-block;padding:.35rem .75rem;border-radius:var(--radius-full);font-size:.78rem;
  font-weight:600;letter-spacing:.025em;white-space:nowrap;
  background:rgba(217,79,144,.2);border:1px solid var(--accent);color:var(--accent)}
.badge-cyan{background:rgba(0,212,255,.15);border-color:rgba(0,212,255,.4);color:var(--cyan)}
.badge-success{background:rgba(46,213,115,.15);border-color:rgba(46,213,115,.4);color:var(--success)}
.badge-warning{background:rgba(255,165,2,.15);border-color:rgba(255,165,2,.4);color:var(--warning)}

/* ===== Inputs (shared base; page CSS refines) ===== */
.form-input,.message-input{width:100%;font-family:var(--font-base);font-size:.95rem;color:var(--text);
  background:var(--glass-darker);border:1px solid var(--border-solid);border-radius:var(--radius-lg);
  padding:.8rem 1rem;transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}
.form-input::placeholder,.message-input::placeholder{color:var(--text-tertiary)}
.form-input:focus,.message-input:focus{outline:none;border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(217,79,144,.15)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}