/* ============================================
   MUA Studio — Marketing Design Tokens
   Active theme: Bloom (mirrors MUAPalettes.bloom)
   ============================================ */

:root {
  /* --- Primary (Bloom Iris) --- */
  --primary: #7C5891;
  --primary-light: #9D7FB3;
  --primary-dark: #5C4275;
  --on-primary: #FFFFFF;
  --primary-bg: rgba(124, 88, 145, 0.10);
  --primary-ring: rgba(124, 88, 145, 0.18);

  /* --- Bloom Accent Petals --- */
  --accent-mauve: #B06080;
  --accent-terracotta: #C4856C;
  --accent-mustard: #C9A850;

  /* --- Secondary (Bloom Ink) --- */
  --secondary: #38303F;

  /* --- Background & Surface --- */
  --bg: #FFFFFF;
  --surface: #FAF7FC;
  --surface-elevated: #FFFFFF;
  --navbar-bg: rgba(255, 255, 255, 0.86);

  /* --- Bloom Neutrals --- */
  --neutral-50: #FAF7FC;
  --neutral-100: #F3EEF7;
  --neutral-200: #E5DCEC;
  --neutral-300: #CFC2DA;
  --neutral-400: #AEA0BD;
  --neutral-500: #8B7E9A;
  --neutral-600: #655970;
  --neutral-700: #4A4053;
  --neutral-800: #38303F;
  --neutral-900: #26212C;

  /* --- Text --- */
  --text: #26212C;
  --text-secondary: #655970;
  --text-muted: #8B7E9A;

  /* --- Borders --- */
  --border: #E5DCEC;
  --border-light: #F3EEF7;

  /* --- Semantic --- */
  --success: #2D8F5E;
  --success-bg: #E8F5EE;
  --warning: #D4862F;
  --warning-bg: #FDF3E8;
  --error: #C43D2F;
  --error-bg: #FBEAE8;
  --info: #4A7FA5;
  --info-bg: #E8F0F7;

  /* --- Border Radius --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-rgb: 56, 48, 63;
  --shadow-sm: 0 2px 6px rgba(var(--shadow-rgb), 0.1);
  --shadow-md: 0 4px 16px rgba(var(--shadow-rgb), 0.14);
  --shadow-lg: 0 8px 32px rgba(var(--shadow-rgb), 0.18);

  /* --- Spacing --- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* --- Typography ---
     Single-family system: Fira Sans for all text.
     Fira Code is reserved for numerals only (prices, stats, times, invoice IDs). */
  --font-display: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Motion --- */
  --duration-micro: 75ms;
  --duration-short: 200ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;

  /* --- Layout --- */
  --max-width: 1100px;
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #C4A8D6;
    --primary-light: #D6BFE3;
    --primary-dark: #A88DBC;
    --on-primary: #1B1620;
    --primary-bg: rgba(196, 168, 214, 0.16);
    --primary-ring: rgba(196, 168, 214, 0.24);

    --accent-mauve: #E8B4C8;
    --accent-terracotta: #E4BBA9;
    --accent-mustard: #F8E8C0;

    --secondary: #F3EEF7;

    --bg: #1B1620;
    --surface: #231D29;
    --surface-elevated: #2E2636;
    --navbar-bg: rgba(27, 22, 32, 0.86);

    --neutral-50: #2E2636;
    --neutral-100: #38303F;
    --neutral-200: #4A4053;
    --neutral-300: #655970;
    --neutral-400: #8B7E9A;
    --neutral-500: #AEA0BD;
    --neutral-600: #CFC2DA;
    --neutral-700: #E5DCEC;
    --neutral-800: #F3EEF7;
    --neutral-900: #FAF7FC;

    --text: #F3EEF7;
    --text-secondary: #AEA0BD;
    --text-muted: #655970;

    --border: #38303F;
    --border-light: #2E2636;

    --success: #4ABA7A;
    --success-bg: #1A2E22;
    --warning: #E8A04A;
    --warning-bg: #2E2318;
    --error: #E06050;
    --error-bg: #2E1C1A;
    --info: #6AA0C4;
    --info-bg: #1A2530;

    --shadow-rgb: 0, 0, 0;
    --shadow-sm: 0 2px 6px rgba(var(--shadow-rgb), 0.3);
    --shadow-md: 0 4px 16px rgba(var(--shadow-rgb), 0.35);
    --shadow-lg: 0 8px 32px rgba(var(--shadow-rgb), 0.4);
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- No-JS Fallback --- */
noscript .fade-in,
noscript .slide-up {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Numeric helper ---
   Wrap digit-bearing spans in <span class="num"> (or apply .num / .tabular)
   so Fira Code swaps in for any price, time, stat, invoice ID, or date.
   Tabular-nums + slashed zero keep columns aligned without effort. */
.num,
.tabular {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: 0;
}