/* Design Tokens (global + legacy aliases) */
:root {
  /* Typography */
  --fuente-primaria:
    "Geist", "Geist Sans", "GeistSans", system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;
  --font-family-sans: var(--fuente-primaria);
  --font-family-display: var(--font-family-sans);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Type scale */
  --font-size-xxs: 12px;
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 22px;
  --font-size-2xl: 26px;
  --font-size-3xl: 32px;
  --font-size-4xl: 36px;
  --font-size-5xl: 50px;
  --font-size-6xl: 54px;
  --font-size-7xl: 74px;
  --font-size-8xl: 94px;

  /* Legacy size aliases */
  --extra-small: var(--font-size-xxs);
  --small: var(--font-size-xs);
  --normal: var(--font-size-sm);
  --medium: var(--font-size-md);
  --large: var(--font-size-lg);
  --extra-large: var(--font-size-xl);
  --extra-large-2: var(--font-size-2xl);
  --extra-large-3: var(--font-size-3xl);
  --extra-large-4: var(--font-size-4xl);
  --extra-large-5: var(--font-size-5xl);
  --extra-large-6: var(--font-size-6xl);
  --extra-large-7: var(--font-size-7xl);
  --extra-large-8: var(--font-size-8xl);

  /* Brand + semantic colors */
  --color-primario: var(--color-action-primary);
  --color-secundario-a: #fbc04b;
  --color-secundario-b: #00b2e1;
  --color-secundario-c: #223928;
  --color-secundario-d: #00a651;
  --color-secundario-e: #a6ce39;
  --color-secundario-f: #ffcb05;
  --color-secundario-g: #f37431;
  --color-secundario-h: #ed1c24;

  --color-action-primary: #F05A28;
  --color-acento: var(--color-action-primary);
  --color-acento-hover: var(--color-action-primary);
  --color-accent-blue: #2e7def;

  --color-blanco: #ffffff;
  --color-negro: #101218;
  --color-text-primary: #101218;
  --color-text-secondary: #636b79;
  --color-text-muted: #8f98a8;

  --color-surface: #ffffff;
  --color-surface-soft: #f6f8ff;
  --color-bg-neutral: #f2f6fb;
  --color-accent-soft: color-mix(
    in srgb,
    var(--color-accent-violet) 12%,
    transparent
  );

  --color-border: #d8dee9;
  --color-border-strong: #b7c1d3;
  --color-focus: color-mix(in srgb, var(--color-accent-blue) 24%, transparent);

  /* Spacing scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius (unificado) */
  --radius-unified: 14px;
  --radius-xs: var(--radius-unified);
  --radius-sm: var(--radius-unified);
  --radius-md: var(--radius-unified);
  --radius-lg: var(--radius-unified);
  --radius-xl: var(--radius-unified);
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Legacy radius aliases */
  --border-radius-small: var(--radius-xs);
  --border-radius-normal: var(--radius-sm);
  --border-radius-large: var(--radius-lg);
  --card-radius: var(--radius-md);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(16, 18, 24, 0.06);
  --shadow-sm: 0 6px 18px rgba(16, 18, 24, 0.08);
  --shadow-md: 0 14px 36px rgba(16, 18, 24, 0.12);
  --shadow-lg: 0 22px 48px rgba(16, 18, 24, 0.16);

  /* Legacy shadow aliases */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);

  /* Semantic status tones (pedido, pago, etc.) — usados por Admin MG y Empresas. */
  --ds-status-neutral: #646e87;
  --ds-status-muted: #939db8;
  --ds-status-info: #5b63d3;
  --ds-status-success: #00885d;
  --ds-status-warning: #c9774f;
  --ds-status-danger: #c03a5a;
  --ds-status-brand: var(--ds-status-info);

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;

  /* Overlays: fondo detrás de hojas y diálogos. */
  --overlay-scrim: rgba(7, 10, 16, 0.38);
  --overlay-blur: 18px;

  /* Layout */
  --container-max: 1200px;
  --container-w: var(--container-max);
  --container-gutter: 16px;
  --page-gap: var(--container-gutter);
  --layout-shell-max: 1280px;
  --layout-shell-gutter: var(--container-gutter);
  --layout-shell-radius: var(--radius-unified);
  --layout-shell-radius-sm: var(--radius-unified);

  /* Bootstrap radius bridge */
  --bs-border-radius: var(--radius-unified);
  --bs-border-radius-sm: var(--radius-unified);
  --bs-border-radius-lg: var(--radius-unified);
  --bs-border-radius-xl: var(--radius-unified);
  --bs-border-radius-xxl: var(--radius-unified);
  --bs-border-radius-pill: var(--radius-unified);
  --bs-btn-border-radius: var(--radius-unified);
  --bs-btn-border-radius-sm: var(--radius-unified);
  --bs-btn-border-radius-lg: var(--radius-unified);
  --bs-form-control-border-radius: var(--radius-unified);
  --bs-form-select-border-radius: var(--radius-unified);
  --home-container-w: var(--container-max);
  --home-gap: var(--space-4);
  --section-vertical: 60px;
  --section-vertical-sm: 48px;
  --mg-card-radius: clamp(18px, 1.7vw, 26px);
  --mobile-nav-bottom-gap: 12px;
  --mobile-nav-shell-height: 68px;
  --mobile-footer-gap: 12px;
  --mobile-footer-clearance: calc(
    var(--mobile-nav-shell-height) + var(--mobile-nav-bottom-gap) +
      var(--mobile-footer-gap) + env(safe-area-inset-bottom, 0px)
  );
  --bottom-nav-offset: 0px;

  /* Elevation / layering */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-nav: 1100;
  --z-modal: 1200;
  --z-toast: 1300;

  /* Header */
  --header-height-desktop: 147px;
  --header-height-mobile: 80px;
  --header-height: var(--header-height-mobile);
}

@media (min-width: 768px) {
  :root {
    --header-height: var(--header-height-desktop);
  }
}

@media (max-width: 767.98px) {
  :root {
    --container-gutter: 16px;
    --page-gap: var(--container-gutter);
    --layout-shell-gutter: var(--container-gutter);
  }
}