/* ============================================================
   4sight Labs — Design Tokens  v1.0
   Unified system: marketing website + product UI (web/)
   Dark-first. Light mode via [data-theme="light"].
   Fonts: IBM Plex Sans + IBM Plex Mono (labels, data, eyebrows).
   ============================================================ */

:root {
  /* ---------- Brand core ---------- */
  --ds-cyan:        #00d1ff;  /* primary brand accent — links, focus, glow, logo */
  --ds-cyan-bright: #4de0ff;  /* hover / active accent */
  --ds-cyan-deep:   #0084b8;  /* accent on light bg / pressed */
  --ds-green:       #5ed97d;  /* positive, ROI, currency, "value created" */
  --ds-mint:        var(--ds-green); /* deprecated alias */
  --ds-violet:      #8b7cff;  /* secondary chart / AI-reasoning motif */

  /* ---------- Status ---------- */
  --ds-warn:   #ffb224;
  --ds-danger: #d87070;
  --ds-info:   var(--ds-cyan);

  /* ---------- Dark theme (default) ---------- */
  --ds-bg:        #0a0f18;   /* page base — navy-black, not pure black */
  --ds-surface:   #0f1622;   /* cards, panels */
  --ds-raised:    #16202f;   /* elevated cards, popovers */
  --ds-inset:     #070b11;   /* code blocks, wells */
  --ds-overlay:   rgba(10, 15, 24, 0.82);

  --ds-text:      #edf2f9;
  --ds-text-2:    #a3b0c2;   /* secondary copy */
  --ds-text-3:    #64738a;   /* muted, captions, disabled */
  --ds-text-inverse: #0b1120;

  --ds-hairline:  rgba(233, 240, 255, 0.08);  /* 1px rules, section dividers */
  --ds-border:    rgba(233, 240, 255, 0.14);  /* interactive component borders */
  --ds-border-strong: rgba(233, 240, 255, 0.28);

  --ds-accent-text: var(--ds-cyan);           /* accent used as text/link */
  --ds-positive-text: var(--ds-green);

  /* Glass + glow (product signature, use sparingly on marketing) */
  --ds-glass-bg: rgba(255, 255, 255, 0.05);
  --ds-glass-blur: 12px;
  --ds-glow-cyan: 0 0 12px rgba(0, 209, 255, 0.35), 0 0 32px rgba(0, 209, 255, 0.12);

  /* ---------- Charts (dark) ---------- */
  --ds-chart-1: var(--ds-cyan);
  --ds-chart-2: var(--ds-green);
  --ds-chart-3: var(--ds-violet);
  --ds-chart-4: var(--ds-warn);
  --ds-chart-5: #ff7ab8;
  --ds-chart-6: #7da2c9;

  /* ---------- Typography ---------- */
  --ds-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --ds-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Courier New", monospace;

  /* Fluid display scale (marketing) */
  --ds-text-display-xl: clamp(3rem, 1.5rem + 5vw, 5.5rem);     /* hero */
  --ds-text-display:    clamp(2.25rem, 1.25rem + 3.5vw, 4rem); /* section titles */
  /* Fixed scale (product + site body) */
  --ds-text-h1: 2.25rem;
  --ds-text-h2: 1.75rem;
  --ds-text-h3: 1.375rem;
  --ds-text-h4: 1.125rem;
  --ds-text-body: 1rem;
  --ds-text-small: 0.875rem;
  --ds-text-caption: 0.75rem;
  --ds-text-eyebrow: 0.75rem;      /* always mono + uppercase */

  --ds-leading-display: 1.05;
  --ds-leading-heading: 1.2;
  --ds-leading-body: 1.6;

  --ds-tracking-display: -0.02em;
  --ds-tracking-eyebrow: 0.14em;   /* mono uppercase labels */
  --ds-tracking-mono-label: 0.08em;

  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-display: 600;        /* never heavier than 600 — precision, not shouting */

  /* ---------- Spacing (4px base) ---------- */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-24: 6rem;
  --ds-section-y: clamp(4rem, 2rem + 6vw, 8rem);   /* marketing section rhythm */
  --ds-container-max: 75rem;                        /* 1200px content column */
  --ds-container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Radius ---------- */
  --ds-radius-xs: 2px;    /* chips, tags — near-sharp, institutional */
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;    /* default: buttons, inputs, cards */
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;

  /* ---------- Elevation ---------- */
  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --ds-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* ---------- Motion ---------- */
  --ds-dur-fast: 120ms;
  --ds-dur-base: 200ms;
  --ds-dur-slow: 320ms;
  --ds-ease: cubic-bezier(0.25, 0, 0.25, 1);
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Focus ---------- */
  --ds-focus-ring: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-cyan);

  color-scheme: dark;
}

/* ============================================================
   Light theme — "paper" mode. Used for docs, print, and the
   Palantir-style lavender diagram sections.
   ============================================================ */
[data-theme="light"] {
  --ds-bg:        #fafbfd;
  --ds-surface:   #ffffff;
  --ds-raised:    #ffffff;
  --ds-inset:     #eef0f8;    /* lavender well — isometric diagram background */
  --ds-overlay:   rgba(250, 251, 253, 0.85);

  --ds-text:      #0b1120;
  --ds-text-2:    #46536a;
  --ds-text-3:    #8391a6;
  --ds-text-inverse: #edf2f9;

  --ds-hairline:  rgba(11, 17, 32, 0.09);
  --ds-border:    rgba(11, 17, 32, 0.16);
  --ds-border-strong: rgba(11, 17, 32, 0.32);

  --ds-accent-text: var(--ds-cyan-deep);   /* AA contrast on light */
  --ds-positive-text: #238146;

  --ds-glass-bg: rgba(11, 17, 32, 0.04);
  --ds-glow-cyan: none;

  --ds-chart-6: #5b7fa6;

  --ds-shadow-1: 0 1px 2px rgba(11, 17, 32, 0.08);
  --ds-shadow-2: 0 4px 16px rgba(11, 17, 32, 0.10);
  --ds-shadow-3: 0 12px 40px rgba(11, 17, 32, 0.14);

  --ds-focus-ring: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-cyan-deep);

  color-scheme: light;
}

/* ============================================================
   shadcn/ui compatibility layer — lets web/ adopt the system by
   importing this file after globals.css. Names match existing
   variables in web/src/app/globals.css.
   ============================================================ */
.ds-shadcn-bridge,
:root:has(> body.ds-adopt) {
  --background: var(--ds-bg);
  --foreground: var(--ds-text);
  --card: var(--ds-surface);
  --card-foreground: var(--ds-text);
  --popover: var(--ds-raised);
  --popover-foreground: var(--ds-text);
  --primary: var(--ds-cyan);
  --primary-foreground: var(--ds-text-inverse);
  --secondary: var(--ds-raised);
  --secondary-foreground: var(--ds-text);
  --muted: var(--ds-raised);
  --muted-foreground: var(--ds-text-2);
  --accent: var(--ds-raised);
  --accent-foreground: var(--ds-text);
  --destructive: var(--ds-danger);
  --border: var(--ds-border);
  --input: var(--ds-border);
  --ring: var(--ds-cyan);
  --neon-cyan: var(--ds-cyan);
  --positive-green: var(--ds-green);
  --radius: var(--ds-radius-md);
  --chart-1: var(--ds-chart-1);
  --chart-2: var(--ds-chart-2);
  --chart-3: var(--ds-chart-3);
  --chart-4: var(--ds-chart-4);
  --chart-5: var(--ds-chart-5);
}

/* ============================================================
   Core recipes — the handful of signature patterns.
   ============================================================ */

/* Mono eyebrow label — precedes every section title (Palantir-style) */
.ds-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-eyebrow);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-accent-text);
}

/* Section index — "/ 01" numbered sections */
.ds-index {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-small);
  color: var(--ds-text-3);
  letter-spacing: var(--ds-tracking-mono-label);
}

/* Hairline rule */
.ds-rule { border: 0; border-top: 1px solid var(--ds-hairline); }

/* Glass panel (product signature) */
.ds-glass {
  background: var(--ds-glass-bg);
  backdrop-filter: blur(var(--ds-glass-blur));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
  border: 1px solid var(--ds-hairline);
  border-radius: var(--ds-radius-lg);
}

/* Cyan glow border — reserve for one hero element per view */
.ds-glow {
  border: 1px solid var(--ds-cyan);
  box-shadow: var(--ds-glow-cyan);
}

/* Diagram label — mono annotation with leader line, used in
   isometric layer diagrams */
.ds-diagram-label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption);
  letter-spacing: var(--ds-tracking-mono-label);
  text-transform: uppercase;
  color: var(--ds-text-2);
}