/*
Project: Matrix Family Brand
Company: Matrix Family Inc. (https://matrix.family)
Maintainer: Matrix Family Inc.
Contact: dev@matrix.family
Support: support@matrix.family
Matrix: @support:matrix.family
Date: 2026-08-15 UTC
Status: Created
*/

/* THE single source of truth for the Matrix Family / MXCore visual
 * identity. Every site and application consumes these custom
 * properties; nothing redefines a value found here.
 *
 * Namespace: --mx-*  (brand-neutral, framework-agnostic).
 * Consumers:
 *   - plain CSS sites: link this file, use var(--mx-*) directly or
 *     alias locally;
 *   - Tailwind v4 apps: import this file, then map inside
 *     `@theme inline { --color-bg: var(--mx-bg); ... }`.
 */

:root {
  /* surfaces */
  --mx-bg: #000000;
  --mx-surface: #1c1c1e;
  --mx-surface-hover: #2c2c2e;
  --mx-surface-elevated: #3a3a3c;
  --mx-code-bg: #0d0d0d;

  /* brand primary (icons, thin strokes, dots, accents, text on dark bg) */
  --mx-primary: #3d9970;
  --mx-primary-hover: #358a64;
  --mx-primary-muted: rgba(61, 153, 112, 0.15);
  /* solid CTA fill: darker so white text passes WCAG AA (7:1 @ #1c5a3e) */
  --mx-primary-solid: #1c5a3e;
  --mx-primary-solid-hover: #144530;
  --mx-primary-foreground: #ffffff;

  /* secondary accent (premium, highlights; use sparingly) */
  --mx-accent: #d4af37;
  --mx-accent-muted: rgba(212, 175, 55, 0.15);

  /* text */
  --mx-text: #ffffff;
  --mx-text-secondary: #8e8e93;
  --mx-text-muted: #48484a;

  /* borders */
  --mx-border: #38383a;
  --mx-border-hover: #48484c;

  /* status */
  --mx-success: #3fb950;
  --mx-success-muted: rgba(63, 185, 80, 0.15);
  --mx-warning: #d29922;
  --mx-warning-muted: rgba(210, 153, 34, 0.15);
  --mx-danger: #f44336;
  --mx-danger-muted: rgba(244, 67, 54, 0.15);
  --mx-info: #58a6ff;
  --mx-info-muted: rgba(88, 166, 255, 0.15);

  /* typography */
  --mx-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mx-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* radii */
  --mx-radius-sm: 6px;
  --mx-radius-md: 10px;
  --mx-radius-lg: 16px;
  --mx-radius-full: 9999px;
}