@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500&display=swap');

/* ── Color tokens ─────────────────────────────────────────── */
:root {
  --accent:        #7c3aed;   /* indigo-600 */
  --accent-dark:   #5b21b6;
  --accent-light:  #a78bfa;
  --accent-bg:     rgba(124, 58, 237, 0.07);
  --accent-border: rgba(124, 58, 237, 0.2);

  --lavender:      #a78bfa;
  --lavender-bg:   rgba(167, 139, 250, 0.1);

  /* Light-first neutrals */
  --text:          #52525b;   /* zinc-600 */
  --text-h:        #18181b;   /* zinc-900 */
  --text-sub:      #a1a1aa;   /* zinc-400 */
  --bg:            #ffffff;   /* white */
  --bg-raised:     #fafafa;   /* off-white */
  --bg-subtle:     #f4f4f5;   /* zinc-100 */
  --border:        #e4e4e7;   /* zinc-200 */
  --border-bright: #d4d4d8;   /* zinc-300 */
  --shadow:        0 4px 24px rgba(0,0,0,0.08);

  /* Typography */
  --sans:    'Bricolage Grotesque', system-ui, sans-serif;
  --heading: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono:    ui-monospace, Consolas, monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  40px;

  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── Text hierarchy ───────────────────────────────────────── */
h1 {
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-h);
}

h2 {
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-h);
}

h3 {
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.3;
  color: var(--text-h);
}

h4, h5, h6 {
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--text-h);
}

p { margin: 0; color: var(--text); }