/* go home ON time — Design Tokens */
:root {
  /* Brand: Jade — primary accent, vivid GO! teal-green */
  --gh-jade-50:  oklch(97% 0.02 175);
  --gh-jade-100: oklch(93% 0.05 175);
  --gh-jade-200: oklch(86% 0.10 175);
  --gh-jade-300: oklch(78% 0.14 175);
  --gh-jade-400: oklch(72% 0.16 175);
  --gh-jade-500: #06C4A1; /* Primary — Jade */
  --gh-jade-600: #04A185;
  --gh-jade-700: oklch(50% 0.13 175);
  --gh-jade-800: oklch(38% 0.10 175);
  --gh-jade-900: oklch(26% 0.06 175);

  /* Legacy alias kept for any old refs */
  --gh-blue-500: #06C4A1;
  --gh-blue-600: #04A185;

  /* Warm-cool neutrals — slight blue undertone, not dead gray */
  --gh-ink-50:   oklch(98.5% 0.003 250);
  --gh-ink-100:  oklch(96%   0.005 250);
  --gh-ink-200:  oklch(92%   0.007 250);
  --gh-ink-300:  oklch(85%   0.009 250);
  --gh-ink-400:  oklch(70%   0.011 250);
  --gh-ink-500:  oklch(55%   0.013 250);
  --gh-ink-600:  oklch(42%   0.014 250);
  --gh-ink-700:  oklch(30%   0.014 250);
  --gh-ink-800:  oklch(20%   0.013 250);
  --gh-ink-900:  oklch(13%   0.012 250);
  --gh-ink-950:  oklch(9%    0.010 250);

  /* Functional accents — same chroma family */
  --gh-mint:    oklch(72% 0.15 165); /* success / time-saved */
  --gh-amber:   oklch(78% 0.16 75);  /* attention */
  --gh-rose:    oklch(65% 0.20 22);  /* alert */

  /* Type */
  --gh-display: 'Instrument Serif', 'Times New Roman', serif;
  --gh-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --gh-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Radii */
  --gh-r-xs: 4px;
  --gh-r-sm: 6px;
  --gh-r-md: 8px;   /* default */
  --gh-r-lg: 12px;
  --gh-r-xl: 18px;
  --gh-r-pill: 999px;

  /* Spacing scale (4px base) */
  --gh-s-1: 4px;  --gh-s-2: 8px;  --gh-s-3: 12px; --gh-s-4: 16px;
  --gh-s-5: 20px; --gh-s-6: 24px; --gh-s-8: 32px; --gh-s-10: 40px;
  --gh-s-12: 48px; --gh-s-16: 64px; --gh-s-20: 80px; --gh-s-24: 96px;

  /* Shadow */
  --gh-shadow-sm: 0 1px 2px rgba(13,18,30,.06), 0 1px 1px rgba(13,18,30,.04);
  --gh-shadow-md: 0 6px 16px -4px rgba(13,18,30,.10), 0 2px 4px rgba(13,18,30,.06);
  --gh-shadow-lg: 0 24px 48px -12px rgba(13,18,30,.18), 0 8px 16px -8px rgba(13,18,30,.08);
  --gh-shadow-blue: 0 8px 24px -6px oklch(58% 0.24 262 / .35);

  /* Motion */
  --gh-ease: cubic-bezier(.2, .7, .2, 1);
  --gh-ease-out: cubic-bezier(.16, 1, .3, 1);
  --gh-dur-fast: 140ms;
  --gh-dur: 220ms;
  --gh-dur-slow: 420ms;
}

/* Light surface (default) */
.gh-light {
  --gh-bg: var(--gh-ink-50);
  --gh-bg-elev: #ffffff;
  --gh-bg-sunken: var(--gh-ink-100);
  --gh-fg: var(--gh-ink-900);
  --gh-fg-muted: var(--gh-ink-600);
  --gh-fg-subtle: var(--gh-ink-500);
  --gh-border: oklch(90% 0.008 250);
  --gh-border-strong: var(--gh-ink-300);
  --gh-primary: #06C4A1;
  --gh-primary-fg: #ffffff;
  --gh-primary-hover: #04A185;
}

/* Dark surface */
.gh-dark {
  --gh-bg: var(--gh-ink-950);
  --gh-bg-elev: var(--gh-ink-900);
  --gh-bg-sunken: oklch(7% 0.012 250);
  --gh-fg: var(--gh-ink-50);
  --gh-fg-muted: var(--gh-ink-400);
  --gh-fg-subtle: var(--gh-ink-500);
  --gh-border: oklch(22% 0.012 250);
  --gh-border-strong: var(--gh-ink-700);
  --gh-primary: #06C4A1;
  --gh-primary-fg: var(--gh-ink-950);
  --gh-primary-hover: oklch(78% 0.14 175);
}

/* ---------- Component primitives reused everywhere ---------- */

.gh-btn {
  font-family: var(--gh-sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--gh-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--gh-dur) var(--gh-ease),
              color var(--gh-dur) var(--gh-ease),
              border-color var(--gh-dur) var(--gh-ease),
              transform var(--gh-dur-fast) var(--gh-ease),
              box-shadow var(--gh-dur) var(--gh-ease);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.gh-btn:active { transform: translateY(1px); }
.gh-btn-sm { font-size: 13px; padding: 7px 12px; height: 32px; }
.gh-btn-md { font-size: 14px; padding: 9px 16px; height: 40px; }
.gh-btn-lg { font-size: 15px; padding: 12px 22px; height: 48px; }

.gh-btn-primary {
  background: var(--gh-primary);
  color: var(--gh-primary-fg);
  box-shadow: var(--gh-shadow-blue);
}
.gh-btn-primary:hover { background: var(--gh-primary-hover); }

.gh-btn-secondary {
  background: var(--gh-bg-elev);
  color: var(--gh-fg);
  border-color: var(--gh-border-strong);
}
.gh-btn-secondary:hover { background: var(--gh-bg-sunken); }

.gh-btn-ghost {
  background: transparent;
  color: var(--gh-fg);
}
.gh-btn-ghost:hover { background: var(--gh-bg-sunken); }

.gh-btn-inverse {
  background: var(--gh-fg);
  color: var(--gh-bg);
}
.gh-btn-inverse:hover { background: var(--gh-ink-700); }

/* Pills / badges */
.gh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--gh-r-pill);
  font-family: var(--gh-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--gh-border);
  background: var(--gh-bg-elev);
  color: var(--gh-fg-muted);
}
.gh-pill-primary {
  background: color-mix(in oklch, var(--gh-primary) 12%, transparent);
  color: var(--gh-primary);
  border-color: color-mix(in oklch, var(--gh-primary) 25%, transparent);
}
.gh-pill-mint {
  background: color-mix(in oklch, var(--gh-mint) 16%, transparent);
  color: var(--gh-mint);
  border-color: color-mix(in oklch, var(--gh-mint) 30%, transparent);
}

.gh-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  display: inline-block;
}

/* Form controls */
.gh-input, .gh-select, .gh-textarea {
  font-family: var(--gh-sans);
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
  background: var(--gh-bg-elev);
  color: var(--gh-fg);
  border: 1px solid var(--gh-border-strong);
  border-radius: var(--gh-r-md);
  padding: 10px 12px;
  transition: border-color var(--gh-dur) var(--gh-ease),
              box-shadow var(--gh-dur) var(--gh-ease);
  outline: none;
}
.gh-input:focus, .gh-select:focus, .gh-textarea:focus {
  border-color: var(--gh-primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--gh-primary) 22%, transparent);
}
.gh-textarea { min-height: 96px; resize: vertical; }
.gh-label {
  font-family: var(--gh-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gh-fg);
  letter-spacing: -0.005em;
}
.gh-help {
  font-family: var(--gh-mono);
  font-size: 11px;
  color: var(--gh-fg-subtle);
  letter-spacing: 0.02em;
}

.gh-check {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: var(--gh-r-xs);
  border: 1.5px solid var(--gh-border-strong);
  background: var(--gh-bg-elev);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: all var(--gh-dur) var(--gh-ease);
  flex-shrink: 0;
}
.gh-check:checked {
  background: var(--gh-primary);
  border-color: var(--gh-primary);
}
.gh-check:checked::after {
  content: '';
  width: 10px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,6.5 5,9.5 10,3'/></svg>");
  background-size: contain;
}

/* Card */
.gh-card {
  background: var(--gh-bg-elev);
  border: 1px solid var(--gh-border);
  border-radius: var(--gh-r-lg);
  padding: 24px;
}
.gh-card-flat {
  background: var(--gh-bg-sunken);
  border: 1px solid var(--gh-border);
  border-radius: var(--gh-r-lg);
}