/*
  Matrix Systems Documentation Design System — Design Tokens
  ============================================================
  REAL BRAND VALUES — extracted directly from the live site on 2026-08-02:
  https://www.matrix-systems-trader.com/ (fetched HTML + styles.css?v=13 read
  directly; values below are copied from that stylesheet's own :root block,
  not approximated or re-guessed). Previous versions of this file used a
  neutral placeholder palette because no brand assets had been found on this
  machine — the live site was not known/accessible at that time. This
  replaces that placeholder entirely.

  Do not hand-tune these values without re-checking the live site — if the
  site's own tokens change, re-fetch and diff rather than drifting slowly
  out of sync with the actual product.
*/

:root {
  /* ---- Brand palette (from matrix-systems-trader.com styles.css :root) ---- */
  --bg-0: #05070a;
  --bg-1: #0a0f14;
  --bg-2: #0e151b;
  --bg-card: rgba(15, 22, 28, 0.72);
  --bg-card-hover: rgba(19, 28, 35, 0.82);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --accent: #1aff8c;
  --accent-2: #17c964;
  --accent-dim: #0fbf6c;
  --accent-glow: rgba(26, 255, 140, 0.35);
  --danger: #ff5c5c;
  --danger-dim: #ff8a8a;
  --gold: #e8c46a;

  --text-0: #f2f6f4;
  --text-1: #c7d1cd;
  --text-2: #93a19c;
  /* Phase 2.6: lightened from the site's literal #647169 (3.95:1 / 3.57:1 - fails
     WCAG AA 4.5:1 for normal text) to #7d8b83 (5.66:1 / 5.12:1 - passes), verified
     by direct luminance calculation. Same hue, just lighter - not a brand deviation. */
  --text-3: #7d8b83;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container: 1240px;
  --header-h: 76px;

  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 1px rgba(26, 255, 140, 0.15), 0 0 40px rgba(26, 255, 140, 0.08);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.4s;
  --dur-slow: 0.9s;

  --font-en-display: "Orbitron", "Rajdhani", sans-serif;
  --font-en-body: "Rajdhani", "Inter", sans-serif;
  --font-he: "Heebo", sans-serif;

  /* ---- Mapped onto the documentation system's semantic names ---- */
  /* The docs system was originally built against generic names (brand-ink-*,
     brand-primary-*, surface-*, text-primary, etc.) before the real brand
     was known. Rather than rewrite every component's CSS, these variables
     are aliased onto the real tokens above, so components.css needs zero
     changes and both naming schemes stay usable. */
  --brand-ink-900: var(--bg-0);
  --brand-ink-700: var(--bg-1);
  --brand-ink-500: var(--text-3);
  --brand-ink-300: var(--text-2);
  --brand-ink-100: var(--text-1);
  --brand-ink-050: var(--bg-2);

  --brand-primary-700: var(--accent-2);
  --brand-primary-600: var(--accent);
  --brand-primary-500: var(--accent-dim);
  --brand-primary-100: rgba(26, 255, 140, 0.12);

  --brand-accent-600: var(--gold);
  --brand-accent-100: rgba(232, 196, 106, 0.14);

  --color-success-700: var(--accent-2);
  --color-success-100: rgba(26, 255, 140, 0.12);
  --color-warning-700: var(--gold);
  --color-warning-100: rgba(232, 196, 106, 0.14);
  --color-danger-700:  var(--danger);
  --color-danger-100:  rgba(255, 92, 92, 0.14);
  --color-info-700:    var(--accent);
  --color-info-100:    rgba(26, 255, 140, 0.10);
  --color-tip-700:     var(--gold);
  --color-tip-100:     rgba(232, 196, 106, 0.12);

  --surface-page:      var(--bg-0);
  --surface-raised:    var(--bg-1);
  --surface-sunken:    var(--bg-2);
  --surface-border:    var(--line);
  --text-primary:      var(--text-0);
  --text-secondary:    var(--text-2);
  --text-on-primary:   #04150c;
  --link-color:        var(--accent);

  --font-family-sans:    var(--font-en-body);
  --font-family-display: var(--font-en-display);
  --font-family-mono:    "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --font-family-sans-he: var(--font-he);

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.375rem;
  --font-size-2xl:  1.75rem;
  --font-size-3xl:  2.25rem;
  /* Phase 2.6: minimum lowered from the live site's 2.1rem to 1.55rem after real
     320px/375px viewport screenshots showed "Structured execution." overflowing
     and being clipped rather than wrapping at the site's original minimum. */
  --font-size-4xl:  clamp(1.55rem, 7vw, 3.4rem);

  --line-height-tight: 1.1;   /* matches live site's .hero-title */
  --line-height-base:  1.55;  /* matches live site's body */
  --line-height-loose:  1.8;

  --font-weight-regular:  500; /* Rajdhani's usable range starts at 500 per the live site's font import */
  --font-weight-medium:   600;
  --font-weight-semibold: 700;
  --font-weight-bold:     800;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --content-max-width: 780px;
  --hub-sidebar-width: 280px;
  --header-height: var(--header-h);

  --transition-fast: var(--dur-fast) var(--ease);
  --transition-base: var(--dur-med) var(--ease);

  --print-page-margin: 20mm;
  --print-header-height: 14mm;
  --print-footer-height: 12mm;
}