/* Medios Masivos -- design tokens
   Ported from the Medios Masivos design system (mmsales dashboard handoff).
   Mirrors the vendored Phoenix theme's --phoenix-* variables 1:1 (light theme). */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap");

:root {
  /* ---- Base brand + semantic hues ---- */
  --mm-blue: #3874ff;
  --mm-indigo: #6610f2;
  --mm-purple: #6f42c1;
  --mm-pink: #d63384;
  --mm-red: #EC1F00;
  --mm-orange: #E5780B;
  --mm-yellow: #ffc107;
  --mm-green: #25b003;
  --mm-teal: #20c997;
  --mm-cyan: #0097eb;
  --mm-black: #000000;
  --mm-white: #ffffff;

  /* ---- Neutral / gray scale (50 = lightest, 1100 = darkest) ---- */
  --mm-gray-50: #f5f7fa;
  --mm-gray-100: #eff2f6;
  --mm-gray-200: #e3e6ed;
  --mm-gray-300: #cbd0dd;
  --mm-gray-400: #9fa6bc;
  --mm-gray-500: #8a94ad;
  --mm-gray-600: #6e7891;
  --mm-gray-700: #525b75;
  --mm-gray-800: #3e465b;
  --mm-gray-900: #31374a;
  --mm-gray-1000: #222834;
  --mm-gray-1100: #141824;

  /* ---- Role colors ---- */
  --mm-primary: #3874ff;
  --mm-secondary: #31374a;
  --mm-success: #25b003;
  --mm-info: #0097eb;
  --mm-warning: #E5780B;
  --mm-danger: #EC1F00;
  --mm-light: #eff2f6;
  --mm-dark: #141824;

  /* ---- Text-emphasis variants (role color, darkened for AA text on light bg) ---- */
  --mm-primary-text-emphasis: #003CC7;
  --mm-success-text-emphasis: #1C6C09;
  --mm-info-text-emphasis: #005585;
  --mm-warning-text-emphasis: #BC3803;
  --mm-danger-text-emphasis: #B81800;

  /* ---- Subtle backgrounds (badges, alerts, highlighted table cells) ---- */
  --mm-primary-bg-subtle: #E5EDFF;
  --mm-secondary-bg-subtle: #eff2f6;
  --mm-success-bg-subtle: #D9FBD0;
  --mm-info-bg-subtle: #C7EBFF;
  --mm-warning-bg-subtle: #FFEFCA;
  --mm-danger-bg-subtle: #FFE0DB;

  /* ---- Subtle borders that pair with the subtle backgrounds above ---- */
  --mm-primary-border-subtle: #85A9FF;
  --mm-success-border-subtle: #90D67F;
  --mm-info-border-subtle: #60C6FF;
  --mm-warning-border-subtle: #FFCC85;
  --mm-danger-border-subtle: #F48270;

  /* ---- Semantic aliases: what templates should actually reference ---- */
  --mm-body-bg: #f5f7fa;
  --mm-surface: #ffffff;
  --mm-surface-emphasis: #eff2f6;
  --mm-text-body: #31374a;
  --mm-text-heading: #141824;
  --mm-text-secondary: #3e465b;
  --mm-text-tertiary: #525b75;
  --mm-text-muted: #6e7891;
  --mm-text-on-dark: #eff2f6;

  --mm-border: #cbd0dd;
  --mm-border-translucent: rgba(203, 208, 221, 0.54);

  --mm-link: #3874ff;
  --mm-link-hover: #003CC7;

  --mm-navbar-bg: #141824;
  --mm-navbar-text: #9fa6bc;
  --mm-navbar-text-active: #ffffff;

  /* ---- Typography ---- */
  --mm-font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mm-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --mm-body-font-size: 1rem;      /* 16px */
  --mm-body-font-weight: 400;
  --mm-body-line-height: 1.49;

  --mm-fs-display: 2.5rem;   /* h1 hero */
  --mm-fs-h1: 2rem;
  --mm-fs-h2: 1.5rem;
  --mm-fs-h3: 1.25rem;
  --mm-fs-h4: 1.125rem;
  --mm-fs-h5: 1rem;
  --mm-fs-h6: 0.875rem;
  --mm-fs-body: 1rem;
  --mm-fs-small: 0.875rem;
  --mm-fs-tiny: 0.75rem;

  --mm-fw-regular: 400;
  --mm-fw-semibold: 600;
  --mm-fw-bold: 700;
  --mm-fw-black: 900;

  /* ---- Spacing (Bootstrap gutter scale, rem-based) ---- */
  --mm-space-0: 0;
  --mm-space-1: 0.25rem;
  --mm-space-2: 0.5rem;
  --mm-space-3: 1rem;
  --mm-space-4: 1.5rem;
  --mm-space-5: 3rem;
  --mm-gutter-x: 2rem;

  /* ---- Radius ---- */
  --mm-radius-sm: 0.25rem;
  --mm-radius: 0.375rem;
  --mm-radius-lg: 0.5rem;
  --mm-radius-xl: 1rem;
  --mm-radius-xxl: 2rem;
  --mm-radius-pill: 50rem;

  /* ---- Shadow ---- */
  --mm-shadow: 0px 2px 4px -2px rgba(36, 40, 46, 0.08);
  --mm-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --mm-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --mm-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  --mm-focus-ring: 0 0 0 0.25rem rgba(56, 116, 255, 0.25);

  --mm-border-width: 1px;
}

body {
  font-family: var(--mm-font-sans);
}