/* CodeHarana — design tokens + base (shared by ALL pages: app, marketing, auth, legal).
   NOTE: variable names are a contract — styles.css (the Studio app) & site.css read them.
   2026-07-12 "PROFESSIONAL" rev: one unified trust-blue system to match the marketing
   landing. Deep navy = authority, trust-blue #2563eb = competence, green = safety.
   Light-first, credible, no neon/space. Every legacy var name is preserved so nothing
   downstream breaks; values are remapped to the professional palette. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* brand — trust blue */
  --accent: #2563eb;
  --accent-2: #1d4ed8;        /* darker blue — links, checkmarks-as-blue, eyebrow ink */
  --accent-ink: #eff6ff;
  --blue-ink: #1e3a8a;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  /* semantic */
  --ok: #16a34a;
  --green: #16a34a;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --amber: #f59e0b;
  --danger: #e11d48;
  /* legacy "cyber" names → folded into the blue/navy family (no more neon) */
  --cyber: #2563eb;
  --cyber-2: #1e3a8a;
  /* gradients — subtle, professional (no rainbow) */
  --grad: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  --grad-cy: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --grad-mix: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  --grad-soft: linear-gradient(135deg, rgba(37,99,235,.08), rgba(37,99,235,.03));
  /* geometry — aligned to the landing */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow: 0 4px 6px -2px rgba(15,23,42,.05), 0 12px 24px -8px rgba(15,23,42,.10);
  --shadow-lg: 0 24px 60px -20px rgba(15,23,42,.22);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
/* LIGHT is the brand default — matches the marketing landing exactly */
:root, [data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f8fafc;
  --bg-navy: #0f172a;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --elev: #ffffff;
  --border: #e2e8f0;
  --border-soft: #eef2f7;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --ring: rgba(37, 99, 235, .28);
  --glass: #ffffff;
  --glass-2: #ffffff;
  --glass-brd: #e2e8f0;
  --hairline: linear-gradient(135deg, rgba(37,99,235,.28), rgba(37,99,235,.06) 60%, rgba(30,58,138,.14));
  --grid-line: rgba(15, 23, 42, .04);
  --glow: radial-gradient(120% 80% at 50% -10%, rgba(37,99,235,.12), transparent 60%);
}
/* DARK — professional navy (for the builder IDE & users who toggle it). Still trust-blue,
   never deep-space neon. */
[data-theme="dark"] {
  --accent: #3b82f6;
  --accent-2: #60a5fa;
  --accent-ink: #0b1220;
  --bg: #0b1220;
  --bg-2: #0f172a;
  --bg-navy: #060b16;
  --panel: #0f172a;
  --panel-2: #16213a;
  --elev: #1e293b;
  --border: #24314a;
  --border-soft: #1a2438;
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --ring: rgba(59, 130, 246, .42);
  --glass: rgba(255, 255, 255, .035);
  --glass-2: rgba(255, 255, 255, .055);
  --glass-brd: rgba(255, 255, 255, .09);
  --hairline: linear-gradient(135deg, rgba(96,165,250,.35), rgba(255,255,255,.03) 55%, rgba(59,130,246,.18));
  --grid-line: rgba(255, 255, 255, .035);
  --glow: radial-gradient(120% 80% at 50% -10%, rgba(59,130,246,.16), transparent 62%);
  --grad: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  --grad-cy: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --grad-mix: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  --grad-soft: linear-gradient(135deg, rgba(59,130,246,.16), rgba(59,130,246,.05));
  --shadow: 0 16px 48px -20px rgba(0, 0, 0, .6);
  --shadow-lg: 0 34px 90px -30px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
h1, h2, h3, h4, .brand-logo { font-family: var(--display); }
h1, h2, h3, h4 { color: var(--text); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(37,99,235,.18); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: 14.5px; font-weight: 650; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  padding: 11px 18px; border-radius: var(--radius-sm);
  transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap; letter-spacing: -.01em;
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px var(--ring); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 10px 24px -6px var(--ring); }
.btn.ghost { background: transparent; }
.btn.lg { padding: 14px 26px; font-size: 15.5px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn.onnavy { background: #fff; color: var(--text); border-color: #fff; }
.btn.onnavy:hover { background: var(--blue-50); }

/* theme toggle pill */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; transition: .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }

.brand-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--text); }
.brand-logo .mark {
  width: 30px; height: 30px; border-radius: 9px; display: inline-block;
  object-fit: contain; box-shadow: 0 4px 10px -3px var(--ring);
}
.brand-logo b { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}