/* 7eventeen/tokens.css — brand tokens, dark-native */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* wordmark/headline face — self-hosted so lockups never fall back
   (path is relative to this file; keep assets/ next to tokens.css) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* palette — parent, dark (default) */
  --x17-black:   #000000;
  --x17-surface: #0A0A0A;
  --x17-raised:  #1A1A1E;
  --x17-border:  #2E2E33;
  --x17-muted:   #A1A1AA;
  --x17-white:   #FAFAFA;
  /* product accents — never on parent chrome */
  --x17-costguard: #10B981;
  --x17-flowspeak: #FF6159;
  --x17-reserved:  #8A5CF6;
  /* type */
  --x17-font-display: 'Space Grotesk', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --x17-font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --x17-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --x17-track-tight: -0.035em;
  /* semantic */
  --x17-bg: var(--x17-black);
  --x17-fg: var(--x17-white);
  --x17-fg-muted: var(--x17-muted);
}

[data-theme="light"] {
  --x17-bg: #FCFCFB;
  --x17-fg: #131316;
  --x17-fg-muted: #71717A;
  --x17-surface: #FFFFFF;
  --x17-raised: #F0F0EE;
  --x17-border: #E2E2E6;
}

.x17-h { font-family: var(--x17-font-display); font-weight: 700; letter-spacing: var(--x17-track-tight); color: var(--x17-fg); }
.x17-body { font-family: var(--x17-font-sans); font-weight: 400; color: var(--x17-fg-muted); line-height: 1.6; }
.x17-mono { font-family: var(--x17-font-mono); font-variant-numeric: tabular-nums; }
.x17-btn { background: var(--x17-fg); color: var(--x17-bg); font: 600 14px var(--x17-font-sans); padding: 10px 22px; border-radius: 6px; border: 0; }