/* GA Drawings Agent — design tokens.
   Light system modelled on attio.com. GA red is the only saturated colour. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* surfaces */
  --bg:            #ffffff;
  --bg-soft:       #fafafa;
  --bg-sunken:     #f5f5f6;
  --bg-gradient:   linear-gradient(180deg, #ffffff 0%, #f4f6fa 55%, #eef1f7 100%);

  /* ink */
  --ink:           #111113;
  --ink-strong:    #000000;
  --ink-mute:      #6b6e76;
  /* --ink-faint is the decorative tier: uppercase kickers, table headers, unit
     suffixes. It is NOT for sentences. Anything a reader must actually read —
     legal disclosures, helper text, footer notices — uses --ink-mute or darker,
     which clears 4.5:1 on every surface in this file. */
  --ink-faint:     #83878e;
  --ink-ghost:     #c7c9ce;

  /* lines */
  --line:          rgba(0, 0, 0, .07);
  --line-strong:   rgba(0, 0, 0, .12);

  /* brand — from panel.xaml, do not alter */
  --red:           #ed1c24;
  --red-hover:     #bf1018;
  --red-press:     #8c0c10;

  /* product-window chrome — from panel.xaml, do not alter */
  --panel-bg:      #0d0d0d;
  --panel-chat:    #111111;
  --panel-input:   #161616;
  --panel-strip:   #141414;
  --panel-field:   #222222;
  --panel-border:  #333333;
  --panel-text:    #f4f4f4;
  --panel-dim:     #666666;
  --dot-idle:      #ff6d00;
  --dot-live:      #35c759;

  /* dark section (video) */
  --dark-bg:       #08090a;
  --dark-soft:     #101214;
  --dark-line:     rgba(255, 255, 255, .09);
  --dark-ink:      #f2f3f5;
  --dark-mute:     #8b9099;

  /* type */
  --font:          'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --mono-revit:    'Courier New', 'Courier', monospace;

  /* radii */
  --r-ctl:  8px;
  --r-card: 12px;
  --r-win:  14px;

  /* elevation — soft and wide, never tight and dark */
  --shadow-win: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -8px rgba(16,24,40,.10), 0 40px 80px -24px rgba(16,24,40,.16);
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px -6px rgba(16,24,40,.08);

  /* rhythm */
  --navh: 64px;   /* the sticky nav's height — anything that sticks must clear it */
  --wrap: 1200px;
  --gutter: 32px;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
}

/* Attio's tracking curve: the bigger the type, the tighter it sets. */
h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--ink); }
h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -0.042em; }
h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -0.034em; }
h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.18; letter-spacing: -0.026em; }
p  { margin: 0; }

/* The two-tone sentence: lead clause dark, remainder grey, one paragraph. */
.dim { color: var(--ink-mute); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  font: 500 15px/1 var(--font);
  letter-spacing: -0.011em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn-dark  { background: #16171a; color: #fff; }
.btn-dark:hover  { background: #000; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: rgba(0,0,0,.22); }
.btn-red   { background: var(--red); color: #fff; }
.btn-red:hover   { background: var(--red-hover); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

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