/* ============================================================
   DEKART AI SYSTEMS — Brand Design Tokens
   Source of truth for colour, typography, elevation, motion.
   Import:  <link rel="stylesheet" href="/brand/tokens.css">
   ============================================================ */

:root {
  /* ── Surface / background ─────────────────────────────────── */
  --ds-bg:              #000000;          /* absolute black */
  --ds-bg-1:            #050a14;          /* near-black, very dark navy */
  --ds-bg-2:            #071124;          /* panel */
  --ds-bg-3:            #0b1a33;          /* elevated panel */
  --ds-bg-4:            #11233f;          /* hover / inset */
  --ds-border:          rgba(79, 195, 247, 0.18);
  --ds-border-strong:   rgba(79, 195, 247, 0.42);

  /* ── Neon blue spectrum (primary brand colour family) ─────── */
  --ds-neon-50:         #dff3ff;
  --ds-neon-100:        #b7e5ff;
  --ds-neon-200:        #80d4ff;
  --ds-neon-300:        #50d2ff;          /* bright pulse */
  --ds-neon-400:        #4fc3f7;          /* PRIMARY — same as landing wordmark */
  --ds-neon-500:        #2fa9e0;
  --ds-neon-600:        #0087c2;
  --ds-neon-700:        #005d8a;
  --ds-neon-800:        #003a5a;
  --ds-neon-900:        #001e30;

  /* ── Text ─────────────────────────────────────────────────── */
  --ds-text:            #e6eef9;          /* primary text */
  --ds-text-muted:      #b4c5dc;          /* secondary */
  --ds-text-dim:        #7d8fa6;          /* tertiary / divider label */
  --ds-text-white:      #ffffff;

  /* ── Accents for data viz only (P&L, status) ──────────────── */
  --ds-up:              #6ee7b7;          /* green / long / online */
  --ds-down:            #f87171;          /* red / short / offline */
  --ds-warn:            #fbbf24;          /* amber / caution */

  /* ── Neon glow recipes — reuse, don't invent ──────────────── */
  /* Crisp: tight bloom — preserves glyph edges (preferred for wordmarks). */
  --ds-glow-soft:
      0 0 4px  rgba(79, 195, 247, 0.70),
      0 0 12px rgba(79, 195, 247, 0.30),
      0 0 24px rgba(0, 180, 255, 0.12);
  /* Legacy loose halo — use only for decorative UI, not type. */
  --ds-glow-halo:
      0 0 8px  rgba(79, 195, 247, 0.55),
      0 0 22px rgba(79, 195, 247, 0.25),
      0 0 40px rgba(0, 180, 255, 0.12);
  --ds-glow-strong:
      0 0 6px  rgba(79, 195, 247, 0.95),
      0 0 18px rgba(79, 195, 247, 0.55),
      0 0 36px rgba(0, 180, 255, 0.25);
  --ds-glow-edge:
      0 0 0 1px rgba(79, 195, 247, 0.35),
      0 0 12px rgba(79, 195, 247, 0.25);

  /* ── Typography ───────────────────────────────────────────── */
  /* Display / wordmark — Handel Gothic Original is paid; fall back to
     the closest free substitutes, in order of fidelity.            */
  --ds-font-display:
      "Handel Gothic", "Handel Gothic Original",
      "Michroma", "Chakra Petch", "Orbitron",
      "Good Times", "Saira Stencil One",
      system-ui, sans-serif;

  /* UI / body */
  --ds-font-ui:
      "Inter", system-ui, -apple-system,
      "Segoe UI", Roboto, sans-serif;

  /* Data / monospace */
  --ds-font-mono:
      "JetBrains Mono", "SF Mono", "Fira Code",
      Consolas, "Liberation Mono", monospace;

  /* Letter spacing presets — wide caps are a core brand signal */
  --ds-tracking-tight:  -0.01em;
  --ds-tracking-base:    0.02em;
  --ds-tracking-wide:    0.12em;
  --ds-tracking-wider:   0.18em;           /* brand-link on landing */
  --ds-tracking-widest:  0.28em;           /* wordmarks */

  /* Weights */
  --ds-weight-thin:     200;               /* Inter ExtraLight — default for marketing caps */
  --ds-weight-light:    300;
  --ds-weight-regular:  400;
  --ds-weight-medium:   500;
  --ds-weight-bold:     700;

  /* ── Radius / elevation ───────────────────────────────────── */
  --ds-radius-sm: 2px;
  --ds-radius:    6px;
  --ds-radius-lg: 10px;

  --ds-elev-1:  0 1px 0  rgba(255,255,255,0.04) inset,
                0 4px 24px rgba(0, 0, 0, 0.55);
  --ds-elev-2:  0 1px 0  rgba(255,255,255,0.05) inset,
                0 8px 36px rgba(0, 0, 0, 0.70);

  /* ── Motion ───────────────────────────────────────────────── */
  --ds-ease:    cubic-bezier(.22, .61, .36, 1);
  --ds-fast:    160ms;
  --ds-base:    300ms;
  --ds-slow:    600ms;

  /* ── Grid / layout ────────────────────────────────────────── */
  --ds-grid:    8px;
  --ds-maxw:    1280px;
}

/* ── Base reset for brand marketing pages (opt-in) ─────────── */
.ds-root {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Utility: wordmark treatment ──────────────────────────── */
.ds-wordmark {
  font-family: var(--ds-font-display);
  font-weight: 600;
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  color: var(--ds-text);
  /* Sharp 0.5px cyan outline keeps edges crisp against neon bloom. */
  -webkit-text-stroke: 0.6px rgba(79, 195, 247, 0.45);
  paint-order: stroke fill;
  text-shadow: var(--ds-glow-soft);
}
.ds-wordmark--accent {
  color: var(--ds-neon-400);
  -webkit-text-stroke: 0.6px rgba(183, 229, 255, 0.55);
}

/* Sub-brand divider — matches landing ('—' between name and sub) */
.ds-wordmark .ds-sep {
  color: var(--ds-text-dim);
  margin: 0 0.6em;
  font-weight: var(--ds-weight-thin);
}

/* Tagline / micro-copy in caps */
.ds-eyebrow {
  font-family: var(--ds-font-ui);
  font-weight: var(--ds-weight-thin);
  letter-spacing: var(--ds-tracking-wider);
  text-transform: uppercase;
  color: var(--ds-text-muted);
  font-size: 12px;
}

/* Monospace data */
.ds-num {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}