/* ============================================================================
   Moxo Enterprise Ops Portal — BRAND TOKENS (single source of truth)

   To re-brand the entire portal, edit the values here only. Every layout,
   component, and page consumes these via var(--token). Palette extracted from
   moxo.com + app.moxo.com (June 2026).
   ========================================================================== */
:root {
  /* ── Brand ──────────────────────────────────────────────────────────── */
  --brand-indigo:        #4353FF;             /* primary / CTA (Moxo) */
  --brand-indigo-hover:  #3644E0;
  --brand-indigo-soft:   rgba(67, 83, 255, .12);
  --brand-blue:          #43ADFF;             /* logo gradient */
  --brand-green:         #81D674;

  /* ── Surfaces & ink (warm neutrals) ─────────────────────────────────── */
  --bg:            #F6F5F3;                    /* page background */
  --surface:       #FFFFFF;                    /* cards / topbar */
  --surface-sunk:  #FAFAF8;                    /* insets, file rows */
  --ink:           #1F1F1F;                    /* primary text */
  --ink-muted:     #77736F;                    /* secondary text */
  --ink-faint:     #A8A39D;
  --border:        #E4E2DC;
  --border-soft:   #EFEDE9;

  /* ── App shell (warm espresso sidebar — moxo.com's dark surface) ─────── */
  --shell:             #22201E;
  --shell-line:        rgba(255, 255, 255, .08);
  --shell-ink:         rgba(255, 255, 255, .65);
  --shell-ink-dim:     rgba(255, 255, 255, .38);
  --shell-ink-active:  #A5ADFF;                /* light indigo on dark */
  --shell-active-bg:   rgba(67, 83, 255, .20);

  /* ── Semantic (status / feedback) ───────────────────────────────────── */
  --ok-bg:     #F0FDF4;  --ok-border: #BBF7D0;  --ok-ink: #166534;
  --warn-bg:   #FFFBEB;  --warn-border: #FDE68A; --warn-ink: #92400E;
  --danger-bg: #FEF2F2;  --danger-border: #FECACA; --danger-ink: #B91C1C;
  --info-bg:   #EEF1FF;  --info-border: #C7CCFF;  --info-ink: #2A35B8;

  /* ── Typography ─────────────────────────────────────────────────────── */
  /* "Inter" is named first to match app.moxo.com's UI font when self-hosted
     (drop woff2 into assets/fonts + add @font-face). Falls back to the system
     UI sans, which is visually close. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --tracking-tight: -.01em;                    /* moxo.com heading tracking */

  /* ── Shape & elevation ──────────────────────────────────────────────── */
  --radius-card:  14px;                         /* soft, premium card corners */
  --radius-input: 10px;
  --radius-pill:  999px;                        /* moxo.com pill buttons */
  --shadow-card:  0 1px 2px rgba(31, 31, 31, .04), 0 6px 16px -10px rgba(31, 31, 31, .10);
  --shadow-pop:   0 12px 32px -8px rgba(31, 31, 31, .18);
  /* The Moxo signature — the gradient that tops the login card; the one motif
     carried across the app. Use sparingly so it stays special. */
  --brand-gradient: linear-gradient(90deg, var(--brand-green), var(--brand-blue) 55%, var(--brand-indigo));

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --sidebar-w: 240px;
}