/* MIDE OS · design tokens — the ONLY file of the web bundle where colour literals are allowed
   for new code (tests/ui-foundation-contract.test.mjs enforces it for ui/ and views built on it).
   Shared by the Portal Cliente (my.mide.lat) and the Centro de Operaciones (os.mide.lat).

   Cascade layers. In CSS cascade layers the LAST declared layer wins, and unlayered rules beat
   every layer. Existing sheets are imported into `legacy` (ui/legacy.css), so anything written
   in `base`, `components` or `views` wins over them without `!important`:
     tokens  → custom properties only
     legacy  → every stylesheet that existed before the ui/ layer, in its previous order
     base    → minimal, element-level rules for the new layer
     components → ui/components.css
     views   → layout of views rebuilt on the components
     controls → shared control minimums that every module must keep (touch targets ≥ 44 px on phones,
                issue 1133); last so no legacy or view sheet can shrink a control below them */
@layer tokens, legacy, base, components, views, controls;

/* Manrope, self-hosted — official MIDE typeface (Manual de identidad visual 1.3, §7).
   SIL Open Font License 1.1 (ui/fonts/OFL.txt). Subset of the official variable master
   Manrope-VariableFont_wght.ttf into latin / latin-ext woff2, weight axis 200–800 kept intact.
   Self-hosted (never Google Fonts) because the CSP only allows font-src 'self'. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("./fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("./fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    /* ---------- font ---------- */
    --mide-font: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ---------- type scale (7 steps) ---------- */
    --mide-text-xs: 12px;    /* captions, table meta, chips */
    --mide-text-sm: 13px;    /* secondary text, table cells, labels */
    --mide-text-md: 14px;    /* body */
    --mide-text-lg: 16px;    /* card titles */
    --mide-text-xl: 20px;    /* section titles */
    --mide-text-2xl: 26px;   /* KPI values */
    --mide-text-3xl: 30px;   /* page title (H1) */
    --mide-leading-tight: 1.15;
    --mide-leading-snug: 1.3;
    --mide-leading: 1.45;
    --mide-weight-regular: 400;
    --mide-weight-medium: 500;
    --mide-weight-semibold: 600;
    --mide-weight-bold: 700;
    --mide-weight-heavy: 800;

    /* ---------- spacing (4/8/12/16/20/24/32) ---------- */
    --mide-space-1: 4px;
    --mide-space-2: 8px;
    --mide-space-3: 12px;
    --mide-space-4: 16px;
    --mide-space-5: 20px;
    --mide-space-6: 24px;
    --mide-space-8: 32px;

    /* ---------- radii (Manual §9: controles 14–18, tarjetas 20–28, botones píldora) ---------- */
    --mide-radius-sm: 14px;   /* fields, controls, small surfaces */
    --mide-radius: 20px;      /* cards, panels */
    --mide-radius-lg: 28px;   /* drawers, dialogs, hero modules */
    --mide-radius-pill: 999px; /* buttons and chips */

    /* ---------- official brand palette (Manual §6 / §21) — the ONLY brand hex values ----------
       Do not add brand colours here without a manual change. Derived tints/shades below are
       computed from these values with color-mix() so every one is traceable to an official hex. */
    --mide-plum-900: #26172F;     /* Ciruela MIDE: dark backgrounds, sidebar, premium blocks */
    --mide-ink-900: #261F2C;      /* Tinta ciruela: headings and body */
    --mide-violet-600: #7928FF;   /* Violeta MIDE: protagonist, IA, automation, primary action */
    --mide-blue-brand: #2878F0;   /* Azul eléctrico: action continuity, links, Humano */
    --mide-cyan-500: #11C7D8;     /* Cyan vivo: signals and data only — never inside the logo */
    --mide-pink-500: #F63782;     /* Rosa MIDE: growth accents (never red) */
    --mide-orange-500: #FF8A1F;   /* Naranja MIDE: opportunity, warm emphasis */
    --mide-warm-50: #FCFAFC;      /* Blanco cálido: general background */
    --mide-surface-100: #F5F3F7;  /* Niebla lila: cards, panels, dividers */
    --mide-gray-600: #6E6573;     /* Gris medio: secondary text, labels (5.57:1 on white) */
    --mide-white: #FFFFFF;

    /* Acción principal (Manual §6: violeta → azul). Lleva texto blanco, así que termina en el azul
       eléctrico profundo (--mide-blue-700 = 78 % #2878F0 + 22 % #261F2C, 5.65:1) en vez de #2878F0
       (4.17:1): todo el recorrido queda ≥ 5.6:1 con blanco. Prueba: tests/brand-identity-contract. */
    --mide-gradient-action: linear-gradient(90deg, var(--mide-violet-600) 0%, var(--mide-blue-700) 100%);
    --mide-gradient-warm: linear-gradient(90deg, var(--mide-orange-500) 0%, var(--mide-pink-500) 100%);
    --mide-gradient-growth: linear-gradient(90deg, var(--mide-pink-500) 0%, var(--mide-orange-500) 100%);
    --mide-gradient-brand: linear-gradient(100deg, var(--mide-blue-brand) 0%, var(--mide-violet-600) 46%, var(--mide-pink-500) 76%, var(--mide-orange-500) 100%);
    --mide-gradient-data: linear-gradient(90deg, var(--mide-cyan-500) 0%, var(--mide-blue-brand) 50%, var(--mide-violet-600) 100%);

    /* ---------- derived scales (legacy names kept so existing sheets re-skin without edits) ----------
       "navy" was the provisional dark surface; the manual makes ciruela the preferred dark. */
    --mide-navy-950: color-mix(in srgb, var(--mide-plum-900) 82%, #000000);
    --mide-navy-900: var(--mide-plum-900);
    --mide-navy-800: color-mix(in srgb, var(--mide-plum-900) 88%, var(--mide-violet-600));
    --mide-navy-700: color-mix(in srgb, var(--mide-plum-900) 76%, var(--mide-violet-600));
    --mide-violet-700: color-mix(in srgb, var(--mide-violet-600) 82%, var(--mide-ink-900));
    --mide-violet-100: color-mix(in srgb, var(--mide-violet-600) 16%, var(--mide-white));
    --mide-violet-50: color-mix(in srgb, var(--mide-violet-600) 8%, var(--mide-white));
    --mide-pink-50: color-mix(in srgb, var(--mide-pink-500) 9%, var(--mide-white));
    --mide-orange-50: color-mix(in srgb, var(--mide-orange-500) 11%, var(--mide-white));
    --mide-cyan-50: color-mix(in srgb, var(--mide-cyan-500) 11%, var(--mide-white));
    /* Text-safe shades of the signal colours (Manual §6: rosa/naranja/cian never as small text):
       each one ≥ 4.5:1 on its own -50 background. tests/brand-identity-contract checks every tone pair. */
    --mide-pink-700: color-mix(in srgb, var(--mide-pink-500) 75%, var(--mide-ink-900));
    --mide-orange-700: color-mix(in srgb, var(--mide-orange-500) 55%, var(--mide-ink-900));
    --mide-cyan-700: color-mix(in srgb, var(--mide-cyan-500) 50%, var(--mide-ink-900));
    --mide-blue-700: color-mix(in srgb, var(--mide-blue-brand) 78%, var(--mide-ink-900)); /* AA text on white */
    --mide-blue-600: var(--mide-blue-brand);
    --mide-blue-500: color-mix(in srgb, var(--mide-blue-brand) 86%, var(--mide-white));
    --mide-blue-100: color-mix(in srgb, var(--mide-blue-brand) 16%, var(--mide-white));
    --mide-blue-50: color-mix(in srgb, var(--mide-blue-brand) 7%, var(--mide-white));
    --mide-ink: var(--mide-ink-900);
    --mide-ink-2: color-mix(in srgb, var(--mide-ink-900) 80%, var(--mide-gray-600));
    --mide-muted: var(--mide-gray-600);   /* ≥ 5:1 on white, warm and niebla (WCAG AA) */
    --mide-subtle: color-mix(in srgb, var(--mide-gray-600) 55%, var(--mide-white)); /* decorative only */
    --mide-line: rgba(38, 23, 47, .10);
    --mide-line-2: rgba(38, 23, 47, .06);
    --mide-line-strong: rgba(38, 23, 47, .18);
    --mide-panel-line: rgba(38, 23, 47, .08);  /* Manual §9: 1 px border rgba(38,23,47,.08) */
    --mide-canvas: var(--mide-warm-50);
    --mide-surface: var(--mide-white);
    --mide-surface-2: var(--mide-surface-100);
    --mide-surface-hover: color-mix(in srgb, var(--mide-surface-100) 70%, var(--mide-violet-100));
    --mide-on-accent: var(--mide-white);
    --mide-on-dark: var(--mide-white);
    --mide-on-dark-muted: rgba(255, 255, 255, .72);
    --mide-dark-line: rgba(255, 255, 255, .14);  /* Manual §9: white 12–18 % on dark */

    /* functional status colours — not brand colours; always paired with text or icon (Manual §6) */
    --mide-green: #15803d; --mide-green-50: #e9f7ef;
    --mide-amber: #b45309; --mide-amber-50: #fff5e6;
    --mide-red: #b91c1c;   --mide-red-50: #fdeeee;
    --mide-violet: var(--mide-violet-600);
    --mide-teal: #0f766e;   --mide-teal-50: #e6f6f4;

    /* ---------- semantic: actions ---------- */
    --mide-accent: var(--mide-violet-600);         /* Violeta MIDE: 5.9:1 with white text */
    --mide-accent-hover: var(--mide-violet-700);
    --mide-accent-soft: var(--mide-violet-50);
    --mide-accent-gradient: var(--mide-gradient-action); /* primary buttons (Manual §14) */
    --mide-link: var(--mide-blue-700);
    --mide-heading: var(--mide-ink-900);
    --mide-tracking-heading: -0.02em;              /* Manual §7: titulares −2 % a −4 % */

    /* ---------- semantic: status ---------- */
    --mide-ok: var(--mide-green);        --mide-ok-bg: var(--mide-green-50);
    --mide-warn: var(--mide-amber);      --mide-warn-bg: var(--mide-amber-50);
    --mide-danger: var(--mide-red);      --mide-danger-bg: var(--mide-red-50);
    --mide-neutral: var(--mide-gray-600); --mide-neutral-bg: var(--mide-surface-100);   /* ≥ 5:1 on its background */
    --mide-info: var(--mide-blue-700);   --mide-info-bg: var(--mide-blue-50);
    --mide-sandbox: #8a4b08;             --mide-sandbox-bg: #fff8eb;   /* "Simulado": accepted by the sandbox, never sent */

    /* ---------- semantic: data (charts, chips, legends) ----------
       IA is violet and Humano is blue everywhere; never reuse one for the other. */
    --mide-data-ai: var(--mide-violet-600); --mide-data-ai-bg: var(--mide-violet-50);
    --mide-data-human: var(--mide-blue-brand); --mide-data-human-bg: var(--mide-blue-50);
    --mide-data-1: var(--mide-blue-brand);  /* series order follows the brand ribbon; label every series */
    --mide-data-2: var(--mide-violet-600);
    --mide-data-3: var(--mide-pink-500);
    --mide-data-4: var(--mide-orange-500);
    --mide-data-5: var(--mide-cyan-500);
    --mide-data-6: var(--mide-gray-600);
    --mide-chart-grid: var(--mide-line-2);
    --mide-chart-axis: var(--mide-gray-600);

    /* ---------- elevation, focus, overlay ---------- */
    --mide-shadow: 0 12px 35px rgba(38, 23, 47, .08);       /* Manual §9 tarjeta base */
    --mide-shadow-sm: 0 1px 2px rgba(38, 23, 47, .06);      /* dense rows and controls */
    --mide-shadow-lg: 0 18px 50px rgba(38, 23, 47, .12);    /* Manual §9 tarjeta flotante */
    --mide-focus: 0 0 0 3px rgba(121, 40, 255, .30);
    --mide-focus-ring: var(--mide-violet-600);
    --mide-overlay: rgba(38, 23, 47, .48);
    --mide-skeleton: var(--mide-surface-100);
    --mide-skeleton-shine: var(--mide-warm-50);
    --mide-halo-violet: rgba(121, 40, 255, .08);  /* Manual §9 halos 5–14 % */
    --mide-halo-blue: rgba(40, 120, 240, .07);

    /* ---------- motion (Manual §13) ---------- */
    --mide-duration: 220ms;
    --mide-ease: cubic-bezier(.2, .7, .2, 1);
    /* prefers-reduced-motion collapses --mide-duration below (Manual §13). */

    /* ---------- tenant brand zone (docs/design/TENANT_BRANDING.md) ----------
       Defaults are MIDE. ui/components.js applyTenantBrand() may override these ONLY inside
       an element marked [data-brand-zone="tenant"] (quotes, client-facing documents). */
    --tenant-brand-primary: var(--mide-violet-600);
    --tenant-brand-on-primary: var(--mide-white);
    --tenant-brand-accent: var(--mide-blue-brand);
    --tenant-brand-ink: var(--mide-ink-900);
  }
}

@layer tokens {
  @media (prefers-reduced-motion: reduce) { :root { --mide-duration: 1ms; } }
}

/* Fallback for engines without color-mix() (Safari < 16.2, old WebViews): the same derived
   colours precomputed. tests/brand-identity-contract recomputes every value from the mix above. */
@layer tokens {
  @supports not (color: color-mix(in srgb, red, blue)) {
    :root {
      --mide-navy-950: #1F1327;
      --mide-navy-800: #301948;
      --mide-navy-700: #3A1B61;
      --mide-violet-700: #6A26D9;
      --mide-violet-100: #EADDFF;
      --mide-violet-50: #F4EEFF;
      --mide-pink-50: #FEEDF4;
      --mide-orange-50: #FFF2E6;
      --mide-cyan-50: #E5F9FB;
      --mide-pink-700: #C2316D;
      --mide-orange-700: #9D5A25;
      --mide-cyan-700: #1C7382;
      --mide-blue-700: #2864C5;
      --mide-blue-500: #468BF2;
      --mide-blue-100: #DDE9FD;
      --mide-blue-50: #F0F6FE;
      --mide-ink-2: #342D3A;
      --mide-subtle: #AFAAB2;
      --mide-surface-hover: #F2ECF9;
    }
  }
}