@import "fonts.css";

:root {
  --ink:      #161511;
  --ink-2:    #6C6960;
  --ink-3:    #98948A;

  --ink-body: #3A3833;

  --label:    #6C6960;

  --accent:      #EB5200;
  --accent-ink:  #C24000;
  --accent-tint: #FCF4EC;

  --brand:    #1A1A2E;
  --brand-2:  #2A2A44;
  --brand-3:  #9C9CB4;

  --go:   #146B47; --go-tint:   #EAF3EE;
  --warn: #8F6A14; --warn-tint: #F7F0DD;
  --stop: #A44432; --stop-tint: #F6E9E5;

  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;
  --sh-card: 0 30px 60px -40px rgba(22,21,17,.30);
  --sh-soft: 0 14px 34px -24px rgba(22,21,17,.22);
  --maxw: 1120px;

  --display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --sans:    "Albert Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --sign:    "Caveat", "Segoe Script", cursive;

  --sa:     var(--accent);
  --sa-ink: var(--accent-ink);
}


.surface-trust {
  --paper: #FFFFFF;
  --card:  #FFFFFF;
  --wash:  #F7F7F8;
  --line:  #E6E6EA;
  --line-2:#D8D8DE;
  background: var(--paper);
  color: var(--ink);
}

.surface-app {
  --paper: #EFF1F6;
  --card:  #FFFFFF;
  --wash:  #E7EAF1;
  --line:  #DCE0EA;
  --line-2:#C9CEDC;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper, #FFFFFF);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }
a { color: var(--sa-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono, time, .event, .stamp { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sa-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}