/*
  Sepivex — Design Tokens
  Source: brand-guide/sepivex-brand-guide.html (Brand Identity System v3)
  Every value below is copied verbatim from the approved brand guide.
  Do not introduce new colors, fonts, or scale values here — extend
  base.css / layout.css / components.css instead, using these tokens.
*/

:root {
  /* ---- Color: surfaces ---- */
  --bg: #0A0B0D;          /* page / app background */
  --surface: #131519;     /* cards, panels — one step lighter than bg */
  --surface-2: #181B20;   /* nested surfaces, code blocks, inputs */
  --border: #22252B;      /* hairlines, card borders, table rules */

  /* ---- Color: accents ---- */
  --accent: #3D63F5;      /* CTAs, links, active states, logomark — sparingly */
  --accent-2: #F2B84B;    /* data-viz series 2, secondary emphasis, warnings */

  /* ---- Color: text ---- */
  --text-primary: #F5F6F7;   /* headings, body copy on dark surfaces */
  --text-secondary: #9BA1AC; /* subheads, captions, muted labels */
  --text-tertiary: #5B616B;  /* disabled / placeholder / hint only — not for
                                 readable body content (contrast is intentionally
                                 lower; see accessibility note in Phase 3 report) */

  /* ---- Color: semantic ---- */
  --success: #34D399; /* passed tests, healthy status, positive states */
  --error: #F87171;   /* failed tests, error states, destructive actions */

  /* ---- Typography families ---- */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Typography weights (Inter) ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-emphasis: 650; /* used for headings/wordmark at display sizes */
  --weight-bold: 700;

  /* ---- Type scale (exact, from brand guide §05) ---- */
  --text-h1-size: 52px;   --text-h1-weight: var(--weight-semibold); --text-h1-tracking: -0.02em;  --text-h1-leading: 1.1;
  --text-h2-size: 34px;   --text-h2-weight: var(--weight-semibold); --text-h2-tracking: -0.015em; --text-h2-leading: 1.15;
  --text-h3-size: 23px;   --text-h3-weight: var(--weight-semibold); --text-h3-tracking: -0.01em;  --text-h3-leading: 1.25;
  --text-body-size: 16px; --text-body-weight: var(--weight-regular); --text-body-tracking: 0em;   --text-body-leading: 1.6;
  --text-small-size: 13px; --text-small-weight: var(--weight-medium); --text-small-tracking: 0.01em; --text-small-leading: 1.4;
  --text-mono-size: 14px; --text-mono-weight: var(--weight-regular); --text-mono-leading: 1.6;

  /* Wordmark-specific (brand guide §02) — not for general headings */
  --wordmark-uppercase-tracking: 0.06em;  /* Inter 700 */
  --wordmark-sentence-tracking: -0.01em;  /* Inter 650 */

  /* ---- Layout ---- */
  --content-max-width: 1120px;      /* locked for B5 marketing site (not the
                                        brand guide's own 1080px specimen width) */
  --content-max-width-narrow: 720px; /* long-form text blocks: FAQ answers,
                                         service scope copy */
  --section-padding-desktop: 96px;  /* starting rhythm per B5 Phase 3 approval */
  --section-padding-tablet: 64px;
  --section-padding-mobile: 48px;
  --gutter: 32px;

  /* ---- Radius / border ---- */
  --radius-card: 12px;
  --radius-control: 8px;   /* buttons, inputs, small containers */
  --radius-pill: 999px;
  --border-width: 1px;

  /* ---- Spacing scale (8px base unit) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}