/* Vansera Labs — web tokens */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --vl-teal-900: #0B2A2E;  /* deep ground, footers, reversed logo */
  --vl-teal-700: #14464C;  /* primary — logo, headings, primary buttons */
  --vl-teal-500: #4E7A7E;  /* hover/secondary on light */
  --vl-teal-300: #7FA6A2;  /* secondary text on deep teal */
  --vl-teal-100: #DCE6E4;  /* subtle fills, selected rows */
  --vl-brass-500: #C08A3E; /* the rule — accents, never body text */
  --vl-brass-700: #8F6326; /* brass as text on light grounds */

  /* Neutrals */
  --vl-paper-50: #F7F5F0;  /* page background */
  --vl-paper-100: #EFEDE8; /* alternate section background */
  --vl-line: #DCD8D0;      /* 1px borders, dividers */
  --vl-white: #FFFFFF;     /* cards, inputs */
  --vl-ink-900: #191713;   /* body text */
  --vl-ink-700: #4A453E;   /* secondary text */
  --vl-ink-500: #6B6660;   /* captions, meta (min. for small text) */
  --vl-ink-400: #8A857D;   /* labels >= 14px only, placeholders */

  /* Semantic */
  --vl-positive: #2E6B5E;
  --vl-negative: #A33A2E;

  /* Type */
  --vl-font-sans: 'Archivo', system-ui, sans-serif;
  --vl-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --vl-text-display: 600 clamp(44px, 6vw, 72px)/1.04 var(--vl-font-sans);
  --vl-text-h1: 600 clamp(36px, 4.4vw, 52px)/1.08 var(--vl-font-sans);
  --vl-text-h2: 600 clamp(28px, 3vw, 36px)/1.15 var(--vl-font-sans);
  --vl-text-h3: 600 22px/1.3 var(--vl-font-sans);
  --vl-text-lead: 400 20px/1.55 var(--vl-font-sans);
  --vl-text-body: 400 17px/1.6 var(--vl-font-sans);
  --vl-text-small: 400 14px/1.5 var(--vl-font-sans);
  --vl-text-label: 500 12px/1.3 var(--vl-font-mono); /* uppercase, 0.14em tracking */
  --vl-tracking-display: -0.025em;
  --vl-tracking-label: 0.14em;

  /* Space (4px base) */
  --vl-space-1: 4px;  --vl-space-2: 8px;  --vl-space-3: 12px; --vl-space-4: 16px;
  --vl-space-5: 24px; --vl-space-6: 32px; --vl-space-7: 48px; --vl-space-8: 64px;
  --vl-space-9: 96px; --vl-space-10: 128px;

  /* Layout */
  --vl-container: 1200px;
  --vl-gutter: clamp(20px, 4vw, 48px);
  --vl-grid-cols: 12;

  /* Shape */
  --vl-radius: 0;          /* square corners everywhere, matching the mark */
  --vl-radius-icon: 12px;  /* app/favicon tile only */
  --vl-border: 1px solid var(--vl-line);
  --vl-rule: 4px;          /* brass accent bar thickness under headings */

  /* Motion */
  --vl-ease: cubic-bezier(0.2, 0, 0, 1);
  --vl-duration: 180ms;
}