/* ============================================================
   NoType — Aurora Design System
   Reimagined from the original terminal-themed NoType app.
   The brief: keep the typing-without-typing soul of the
   product, but move from a monochrome console aesthetic to a
   modern, commercial, lightly-futuristic look — anchored by
   animated neon-shadow borders.
   ============================================================ */

/* ------------------------------------------------------------
   1. Fonts
   ------------------------------------------------------------ */

/* Display — Space Grotesk: geometric, modern, slight futurist warmth */
/* Body    — Manrope:        clean humanist sans, very legible      */
/* Mono    — JetBrains Mono: kept from the legacy app (real .ttf)   */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap");

/* ------------------------------------------------------------
   2. Base tokens — dark theme is canonical
   ------------------------------------------------------------ */

:root {
  /* ---- Surfaces (deep midnight, cool blue undertone) ---- */
  --bg:          #07080C;    /* page background */
  --bg-elev-1:   #0D0F16;    /* cards, panels */
  --bg-elev-2:   #141724;    /* nested, hover */
  --bg-elev-3:   #1B1F30;    /* inputs, chips */
  --surface-overlay: rgba(255,255,255,0.04);
  --surface-line:    rgba(255,255,255,0.06);

  /* ---- Foreground ---- */
  --fg-1: #F2F4FA;          /* primary text */
  --fg-2: #B6BDD1;          /* secondary */
  --fg-3: #7B8499;          /* tertiary / placeholder */
  --fg-4: #4A5267;          /* disabled, hint */
  --fg-on-neon: #07080C;    /* text on bright neon fills */

  /* ---- Neon palette — the brand signature ---- */
  /* Cyan is the primary aurora; violet + magenta animate alongside */
  --neon-cyan:    #00E5FF;
  --neon-cyan-soft: #4DEEFF;
  --neon-violet:  #8B5CF6;
  --neon-magenta: #FF3DC9;
  --neon-lime:    #B6FF3A;     /* used sparingly for success */
  --neon-amber:   #FFB546;     /* warnings */
  --neon-coral:   #FF5C7A;     /* destructive / errors */

  /* ---- Semantic ---- */
  --accent:        var(--neon-cyan);
  --accent-2:      var(--neon-violet);
  --accent-3:      var(--neon-magenta);
  --success:       var(--neon-lime);
  --warning:       var(--neon-amber);
  --danger:        var(--neon-coral);
  --info:          var(--neon-cyan);

  --success-bg:    rgba(182, 255, 58,  0.10);
  --warning-bg:    rgba(255, 181, 70,  0.10);
  --danger-bg:     rgba(255, 92, 122,  0.10);
  --info-bg:       rgba(0,   229,255,  0.08);

  /* ---- Border ---- */
  --border-1:   rgba(255,255,255,0.08);
  --border-2:   rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.18);
  --border-focus:  var(--neon-cyan);

  /* ---- Radii ---- */
  --r-xs:    6px;
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-pill:  999px;

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

  /* ---- Shadows / aurora glow ----
     Aurora is the signature: a paired neon outer shadow that
     breathes / rotates around the edge of focused surfaces. */
  --shadow-sm:  0 1px 2px  rgba(0,0,0,0.40);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-lg:  0 24px 56px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05) inset;

  --glow-cyan:    0 0 18px rgba(0, 229, 255, 0.45), 0 0 48px rgba(0,229,255,0.25);
  --glow-violet:  0 0 18px rgba(139, 92, 246, 0.50), 0 0 48px rgba(139, 92, 246, 0.28);
  --glow-magenta: 0 0 18px rgba(255, 61, 201, 0.45), 0 0 48px rgba(255, 61, 201, 0.25);
  --glow-aurora:  0 0 22px rgba(0,229,255,0.35), 0 0 44px rgba(139,92,246,0.30), 0 0 60px rgba(255,61,201,0.18);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:   140ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;

  /* ---- Type families ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Manrope",       ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ------------------------------------------------------------
   3. Light theme (optional — same tokens, swapped)
   ------------------------------------------------------------ */
[data-theme="light"] {
  --bg:          #F7F8FB;
  --bg-elev-1:   #FFFFFF;
  --bg-elev-2:   #F1F3F8;
  --bg-elev-3:   #E8EBF3;
  --surface-overlay: rgba(11,13,20,0.04);
  --surface-line:    rgba(11,13,20,0.06);

  --fg-1: #0B0D14;
  --fg-2: #353A4A;
  --fg-3: #6B7388;
  --fg-4: #A4ABBE;
  --fg-on-neon: #07080C;

  --border-1:      rgba(11,13,20,0.08);
  --border-2:      rgba(11,13,20,0.12);
  --border-strong: rgba(11,13,20,0.20);

  --shadow-sm: 0 1px 2px rgba(11,13,20,0.06);
  --shadow-md: 0 6px 20px rgba(11,13,20,0.10);
  --shadow-lg: 0 24px 56px rgba(11,13,20,0.16);
}

/* ------------------------------------------------------------
   4. Semantic type styles
   ------------------------------------------------------------ */
:root {
  --ts-display-1-size:  64px;  --ts-display-1-lh: 1.02; --ts-display-1-tr: -0.03em;
  --ts-display-2-size:  44px;  --ts-display-2-lh: 1.05; --ts-display-2-tr: -0.025em;
  --ts-h1-size:         34px;  --ts-h1-lh:        1.12; --ts-h1-tr:        -0.02em;
  --ts-h2-size:         26px;  --ts-h2-lh:        1.18; --ts-h2-tr:        -0.015em;
  --ts-h3-size:         20px;  --ts-h3-lh:        1.25; --ts-h3-tr:        -0.01em;
  --ts-body-size:       16px;  --ts-body-lh:      1.55; --ts-body-tr:      0;
  --ts-body-sm-size:    14px;  --ts-body-sm-lh:   1.5;  --ts-body-sm-tr:   0;
  --ts-caption-size:    12px;  --ts-caption-lh:   1.4;  --ts-caption-tr:   0.01em;
  --ts-eyebrow-size:    11px;  --ts-eyebrow-lh:   1.2;  --ts-eyebrow-tr:   0.18em;
  --ts-mono-size:       13px;  --ts-mono-lh:      1.5;  --ts-mono-tr:      0;
}

/* Base reset */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic helpers — drop-in classes */
.t-display-1, h1.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--ts-display-1-size);
  line-height: var(--ts-display-1-lh);
  letter-spacing: var(--ts-display-1-tr);
}
.t-display-2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--ts-display-2-size);
  line-height: var(--ts-display-2-lh);
  letter-spacing: var(--ts-display-2-tr);
}
.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--ts-h1-size);
  line-height: var(--ts-h1-lh);
  letter-spacing: var(--ts-h1-tr);
}
.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--ts-h2-size);
  line-height: var(--ts-h2-lh);
  letter-spacing: var(--ts-h2-tr);
}
.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--ts-h3-size);
  line-height: var(--ts-h3-lh);
  letter-spacing: var(--ts-h3-tr);
}
.t-body, p, body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--ts-body-size);
  line-height: var(--ts-body-lh);
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--ts-body-sm-size);
  line-height: var(--ts-body-sm-lh);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--ts-caption-size);
  line-height: var(--ts-caption-lh);
  letter-spacing: var(--ts-caption-tr);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--ts-eyebrow-size);
  line-height: var(--ts-eyebrow-lh);
  letter-spacing: var(--ts-eyebrow-tr);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--ts-mono-size);
  line-height: var(--ts-mono-lh);
}

/* Aurora text — gradient ink used for branded headlines */
.t-aurora {
  background: linear-gradient(92deg, var(--neon-cyan) 0%, var(--neon-violet) 55%, var(--neon-magenta) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------
   5. Aurora glow border — the signature
   Animated 1px gradient stroke that breathes/rotates around
   any container. Use `.aurora` on the element; the rotation
   is driven by a CSS @property hue var.
   ------------------------------------------------------------ */
@property --aurora-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes aurora-spin {
  to { --aurora-angle: 360deg; }
}
@keyframes aurora-breathe {
  0%, 100% { opacity: 0.85; filter: blur(0.5px); }
  50%      { opacity: 1;    filter: blur(0px);   }
}

.aurora,
.aurora-static {
  position: relative;
  isolation: isolate;
}
.aurora::before,
.aurora-static::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
      from var(--aurora-angle),
      var(--neon-cyan)    0deg,
      var(--neon-violet) 120deg,
      var(--neon-magenta) 220deg,
      var(--neon-cyan)   360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.aurora::before {
  animation: aurora-spin 6s linear infinite, aurora-breathe 3s ease-in-out infinite;
}
/* Aurora-glow: also drops a colored outer shadow */
.aurora-glow {
  box-shadow: var(--glow-aurora);
}
/* ============================================================
   NoType — Components stylesheet
   Tokens are defined in colors_and_type.css.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.005em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-quick) var(--ease-out),
    transform  var(--dur-quick) var(--ease-out),
    box-shadow var(--dur-base)  var(--ease-out),
    color      var(--dur-quick) var(--ease-out),
    border-color var(--dur-quick) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: scale(0.97); }

.btn--primary {
  background: var(--fg-1);
  color: #07080C;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 14px rgba(0,0,0,0.32);
}
.btn--primary:hover:not(:disabled) {
  background: #FFFFFF;
}

.btn--secondary {
  background: var(--bg-elev-2);
  color: var(--fg-1);
  border-color: var(--border-2);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--bg-elev-3);
  border-color: var(--border-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--fg-2);
}
.btn--ghost:hover:not(:disabled) {
  color: var(--fg-1);
  background: var(--surface-overlay);
}

.btn--danger {
  background: rgba(255,92,122,0.10);
  color: var(--neon-coral);
  border-color: rgba(255,92,122,0.30);
}
.btn--danger:hover:not(:disabled) {
  background: rgba(255,92,122,0.18);
}

.btn--aurora {
  background: var(--bg-elev-1);
  color: var(--fg-1);
  position: relative;
  border-radius: var(--r-md);
}
/* aurora border applied via .aurora class on the same element */

.btn--lg { padding: 14px 22px; font-size: 15px; border-radius: var(--r-md); }
.btn--sm { padding: 7px 12px;  font-size: 13px; border-radius: var(--r-sm); }
.btn--icon { padding: 10px; width: 40px; height: 40px; justify-content: center; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(20%);
}

/* ---------- Inputs ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.field__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
}
.input,
.textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-1);
  background: var(--bg-elev-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color var(--dur-quick) var(--ease-out),
              box-shadow   var(--dur-base) var(--ease-out),
              background   var(--dur-quick) var(--ease-out);
  outline: none;
  width: 100%;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-4); }
.input:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 4px rgba(0,229,255,0.14), 0 0 18px rgba(0,229,255,0.18);
  background: var(--bg-elev-2);
}
.textarea { min-height: 96px; resize: vertical; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}
.card--elevated { box-shadow: var(--shadow-lg); }
.card--ghost {
  background: transparent;
  border: 1px dashed var(--border-2);
  box-shadow: none;
}

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--bg-elev-3);
  color: var(--fg-2);
  border: 1px solid var(--border-1);
}
.badge--success { background: var(--success-bg); color: var(--success); border-color: rgba(182,255,58,0.25); }
.badge--warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(255,181,70,0.25); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(255,92,122,0.25); }
.badge--info    { background: var(--info-bg);    color: var(--info);    border-color: rgba(0,229,255,0.25); }

.badge__dot {
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ---------- Kbd (visual chip for keys) ---------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-1);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 7px;
  min-width: 22px;
}

/* ---------- Switch ---------- */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-3);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--fg-2);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.switch--on { background: rgba(0,229,255,0.18); border-color: rgba(0,229,255,0.40); }
.switch--on .switch__thumb {
  transform: translateX(20px);
  background: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0,229,255,0.65);
}

/* ---------- Divider ---------- */
.divider {
  height: 1px;
  background: var(--border-1);
  border: 0;
  width: 100%;
}

/* ---------- Avatar ---------- */
.avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2A3145, #1B1F30);
  border: 1px solid var(--border-2);
  color: var(--fg-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ---------- Tooltip ---------- */
.tooltip {
  background: var(--bg-elev-3);
  border: 1px solid var(--border-2);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}

/* ---------- Aurora ring focus utility ---------- */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--neon-cyan);
}

/* ---------- Voice waveform ---------- */
.waveform {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}
.waveform > span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-violet));
  animation: wave 1.1s ease-in-out infinite;
}
.waveform > span:nth-child(1)  { height: 30%; animation-delay: 0.00s; }
.waveform > span:nth-child(2)  { height: 60%; animation-delay: 0.08s; }
.waveform > span:nth-child(3)  { height: 100%; animation-delay: 0.16s; }
.waveform > span:nth-child(4)  { height: 80%; animation-delay: 0.24s; }
.waveform > span:nth-child(5)  { height: 55%; animation-delay: 0.32s; }
.waveform > span:nth-child(6)  { height: 90%; animation-delay: 0.40s; }
.waveform > span:nth-child(7)  { height: 40%; animation-delay: 0.48s; }
.waveform > span:nth-child(8)  { height: 70%; animation-delay: 0.56s; }
.waveform > span:nth-child(9)  { height: 30%; animation-delay: 0.64s; }
.waveform > span:nth-child(10) { height: 65%; animation-delay: 0.72s; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1);   }
}