/* TraceCodex Design System Tokens */
:root {
  /* Brand */
  --brand-deep: #0B1F4A;       /* deep navy */
  --brand-primary: #1E4FD9;     /* data blue */
  --brand-accent: #00C2D1;      /* data cyan */
  --brand-warn: #FFB020;
  --brand-grid: rgba(46, 107, 255, 0.08);

  /* Neutrals - dark surface */
  --ink-0: #050914;
  --ink-1: #0A1124;
  --ink-2: #0F1A33;
  --ink-3: #16244A;
  --ink-4: #1E2F5C;
  --ink-line: rgba(255,255,255,0.08);
  --ink-line-strong: rgba(255,255,255,0.14);

  /* Neutrals - light surface */
  --paper-0: #FFFFFF;
  --paper-1: #F6F8FC;
  --paper-2: #EDF1F8;
  --paper-3: #DCE3EE;
  --paper-line: #E3E8F1;
  --paper-line-strong: #C9D2E0;

  /* Text */
  --text-on-dark-1: #F2F5FB;
  --text-on-dark-2: #B6C0D6;
  --text-on-dark-3: #6E7A99;
  --text-on-light-1: #0A1124;
  --text-on-light-2: #485475;
  --text-on-light-3: #7B86A2;

  /* Type */
  --font-display: 'Inter Tight', 'PingFang SC', 'Source Han Sans CN', system-ui, sans-serif;
  --font-text: 'Inter', 'PingFang SC', 'Source Han Sans CN', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows */
  --shadow-card-light: 0 1px 0 rgba(10,17,36,.04), 0 12px 30px -12px rgba(10,17,36,.08);
  --shadow-card-dark: 0 1px 0 rgba(255,255,255,.04), 0 24px 60px -20px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  font-feature-settings: "ss01","cv11","tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Grid background utilities */
.bg-grid-dark {
  background-color: var(--ink-0);
  background-image:
    linear-gradient(to right, rgba(46,107,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,107,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-grid-light {
  background-color: var(--paper-1);
  background-image:
    linear-gradient(to right, rgba(11,31,74,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,31,74,.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}