/*
 * theme.css
 * ─────────────────────────────────────────────────────────────
 * SINGLE SOURCE OF TRUTH for all design tokens.
 *
 * Rules:
 *   - NEVER hardcode colors in HTML, components, JS, or other CSS files.
 *   - ALWAYS reference a variable from this file instead.
 *   - Adding a new color means adding it here first.
 * ─────────────────────────────────────────────────────────────
 */

:root {

  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-primary:        #FFFFFF;
  --bg-secondary:      #F8FAFC;
  --bg-card:           #F1F5F9;
  --bg-card-hover:     #EEF2F7;

  /* ── Brand ───────────────────────────────────────────────── */
  --brand-primary:     #9333EA;
  --brand-secondary:   #7C3AED;
  --brand-light:       #A855F7;
  --brand-glow:        #C084FC;

  /* ── Fabric (Microsoft Fabric accent) ────────────────────── */
  --fabric-blue:       #2563EB;
  --fabric-blue-light: #3B82F6;
  --fabric-blue-dark:  #1D4ED8;

  /* ── AI ──────────────────────────────────────────────────── */
  --ai-cyan:           #0891B2;
  --ai-cyan-light:     #06B6D4;

  /* ── Governance ──────────────────────────────────────────── */
  --governance-green:  #059669;

  /* ── WAI ─────────────────────────────────────────────────── */
  --wai-gold:          #D97706;

  /* ── MetaClarity ─────────────────────────────────────────── */
  --mc-meta-blue:      #4246e7;
  --mc-pdf-red:        #dc2626;
  --mc-lineage-sql:    #107c41;
  --mc-lineage-dbt:    #ff694b;
  --mc-lineage-snow:   #29b5e8;
  --mc-lineage-pbi:    #f2c811;

  /* ── Replit (vs Replit page) ──────────────────────────────── */
  --rvr-replit-orange:       #f97316;
  --rvr-replit-orange-light: #fb923c;

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:      #0F172A;
  --text-secondary:    #334155;
  --text-muted:        #64748B;

  /* Text placed on brand/colored backgrounds (buttons, banners) */
  --text-on-brand:     #FFFFFF;

  /* Banner dismiss (on gradient backgrounds) */
  --banner-dismiss-border:        color-mix(in srgb, var(--text-on-brand) 40%, transparent);
  --banner-dismiss-hover-bg:      color-mix(in srgb, var(--text-on-brand) 16%, transparent);
  --banner-dismiss-hover-border:  color-mix(in srgb, var(--text-on-brand) 72%, transparent);

  /* ── Borders ─────────────────────────────────────────────── */
  --border-primary:    rgba(0, 0, 0, 0.08);
  --border-highlight:  rgba(147, 51, 234, 0.25);
  --border-radius:     4px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-glow:       0 0 40px rgba(147, 51, 234, 0.12);

  /* ── Gradients ───────────────────────────────────────────── */
  --gradient-primary:
    linear-gradient(
      90deg,
      #7C3AED 0%,
      #9333EA 30%,
      #2563EB 100%
    );

  --gradient-hero:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F8FAFC 50%,
      #FFFFFF 100%
    );

  --gradient-button:
    linear-gradient(
      90deg,
      var(--brand-light) 0%,
      var(--brand-primary) 50%,
      var(--brand-secondary) 85%,
      var(--brand-secondary) 100%
    );

  --border-button-ghost: color-mix(in srgb, var(--text-primary) 28%, transparent);
  --bg-partnership-panel: color-mix(in srgb, var(--fabric-blue-light) 7%, var(--bg-card));

}