/* ============================================================
 * Arkane Labs — Design Tokens & Semantic Type
 * Load with:  <link rel="stylesheet" href="/colors_and_type.css">
 * ============================================================ */

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

:root {
  /* ============ Color — Surfaces (the slate ramp) ============ */
  --bg-deep:     #1A1E26;  /* hero/footer, modal scrim */
  --bg-base:     #242933;  /* PRIMARY brand background */
  --bg-raised:   #2C323D;  /* cards, panels, popovers */
  --bg-elevated: #363D4A;  /* menus, tooltips, dialogs */

  /* ============ Color — Foreground (text ramp) ============ */
  --fg-1: #E8EBF0;  /* primary text, headings */
  --fg-2: #A5ADBD;  /* secondary, body copy */
  --fg-3: #6E7787;  /* tertiary, captions, metadata */
  --fg-4: #4A5263;  /* placeholder, disabled */

  /* ============ Color — Brand accent ============ */
  --accent:        #00C1B7;  /* THE brand teal */
  --accent-bright: #19D4CA;  /* hover */
  --accent-dim:    #008B85;  /* pressed, de-emphasized */
  --accent-soft:   rgba(0, 193, 183, 0.12);  /* tint backgrounds */

  /* ============ Color — Borders ============ */
  --border-subtle: #353B47;
  --border-strong: #4A5263;
  --border-accent: #00C1B7;

  /* ============ Color — Semantic ============ */
  --success: #2DD4A7;
  --warning: #F5B544;
  --danger:  #FF6B6B;
  --info:    #5AB8FF;

  --success-soft: rgba(45, 212, 167, 0.14);
  --warning-soft: rgba(245, 181, 68, 0.14);
  --danger-soft:  rgba(255, 107, 107, 0.14);
  --info-soft:    rgba(90, 184, 255, 0.14);

  /* ============ Typography — Families ============ */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ Typography — Scale (px) ============ */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-38: 2.375rem;
  --t-48: 3rem;
  --t-60: 3.75rem;
  --t-76: 4.75rem;

  /* ============ Spacing (4px base) ============ */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-14:  56px;
  --s-20:  80px;
  --s-30:  120px;
  --s-40:  160px;

  /* ============ Radii ============ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ============ Shadows ============ */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 1px rgba(0,193,183,0.4), 0 0 24px rgba(0,193,183,0.2);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ============ Motion ============ */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:    120ms;
  --dur:         180ms;
  --dur-slow:    320ms;
}

/* ============================================================
 * Semantic element styles
 * Apply by using these classnames OR by relying on the element
 * defaults below (h1..h6, p, code, small, etc).
 * ============================================================ */

html, body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display / Headings ---- */
.display-1, h1 {
  font-family: var(--font-display);
  font-size: var(--t-76);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}

.display-2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-48);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--fg-1);
}

.display-3, h3 {
  font-family: var(--font-display);
  font-size: var(--t-30);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--fg-1);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--fg-1);
}

h5 {
  font-family: var(--font-display);
  font-size: var(--t-20);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-1);
}

h6 {
  font-family: var(--font-display);
  font-size: var(--t-16);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-1);
}

/* ---- Eyebrow (tracked all-caps) ---- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Body / Prose ---- */
p, .body {
  font-family: var(--font-body);
  font-size: var(--t-16);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
}

.body-lg {
  font-size: var(--t-18);
  line-height: 1.55;
  color: var(--fg-2);
}

.body-sm, small {
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--fg-3);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--t-12);
  line-height: 1.4;
  color: var(--fg-3);
}

/* ---- Mono / Code ---- */
code, .mono, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-1);
}

code {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
  font-size: 0.88em;
}

pre {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-4);
  overflow-x: auto;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
}

kbd {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 0.1em 0.45em;
  font-size: 0.82em;
  color: var(--fg-1);
}

/* ---- Links ---- */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent-bright); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Selection ---- */
::selection {
  background: var(--accent-soft);
  color: var(--fg-1);
}

/* ---- Horizontal rule ---- */
hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--s-8) 0;
}