/**
 * MUTU Master UI/UX — Design Tokens
 * ----------------------------------------------------------------
 * Single source of truth for brand color, spacing, and typography.
 * Load this file BEFORE mutu-theme.css / mutu-components.css so its
 * custom properties are already defined when those files reference
 * them via var(--mutu-*).
 *
 * TO RE-SKIN A NEW PROJECT: change the values in :root below. Every
 * component in mutu-theme.css/mutu-components.css reads color through
 * these variables (not hardcoded hex), so a new brand only requires
 * editing THIS file — no hunting through component CSS.
 *
 * Extracted from Finance UI Laravel (2026-08-04). Brand colors below
 * are MUTU's current red/blue identity - swap for a new brand's own
 * two-tone accent + a "sidebar navy" text color and everything
 * downstream (buttons, badges, sidebar highlight, header gradient
 * line, login page decor) follows automatically.
 */
:root {
  /* --- Brand accents (the "two-tone" identity: header/footer gradient
     line, sidebar active-item accent bar, badges, links) --- */
  --mutu-brand-red: #FF383C;        /* primary accent - CTAs, active states, danger-adjacent highlights */
  --mutu-brand-red-dark: #E42028;   /* sidebar icon color, darker red for contrast on white */
  --mutu-brand-blue: #0C4D9F;       /* secondary accent - links, header gradient endpoint, headings in docs */
  --mutu-brand-blue-alt: #0B4EA1;   /* used interchangeably with brand-blue in a few components (chips, active pagination) - keep in sync if you change brand-blue */
  --mutu-ink: #0A2D48;              /* primary text/heading color (sidebar links, card titles, login title) - NOT pure black, has a navy cast */

  /* --- Neutrals --- */
  --mutu-text-muted: #667085;       /* secondary/help text */
  --mutu-text-faint: #98A2B3;       /* tertiary text (timestamps, "made by" lines) */
  --mutu-text-label: #A0A0A0;       /* menu-title / uppercase small-caps labels */
  --mutu-border: #F0F0F0;           /* hairline borders on cards/tables */
  --mutu-border-strong: #dee2e6;    /* icon-button borders */
  --mutu-surface: #FCFCFC;          /* page background */
  --mutu-surface-card: #ffffff;     /* card/modal background */
  --mutu-hover-tint: #F3F4F6;       /* neutral hover background (close buttons etc.) */

  /* --- Sidebar hover/active gradient (derived from brand-red, kept as
     explicit stops since it's a gradient, not a flat color) --- */
  --mutu-sidebar-active-from: #FFEBEC;
  --mutu-sidebar-active-to: #E7EDF5;

  /* --- Semantic status colors (badges, alerts) - Bootstrap-adjacent but
     tuned to sit next to the brand palette above --- */
  --mutu-success: #198754;
  --mutu-success-bg: #D7EFE2;
  --mutu-warning: #ffc107;
  --mutu-danger: #dc3545;
  --mutu-info: #0dcaf0;

  /* --- Layout metrics --- */
  --mutu-sidebar-width: 250px;
  --mutu-sidebar-width-collapsed: 64px;
  --mutu-header-height: 64px;
  --mutu-radius-sm: 6px;
  --mutu-radius-md: 8px;
  --mutu-radius-lg: 24px;           /* login card, big feature cards */

  /* --- Typography --- */
  --mutu-font-family: 'Inter', sans-serif;
  --mutu-font-size-base: 12px;      /* this app runs a deliberately small base size - bump to 14px for a more "normal" density */
}