/* ============================================================================
   CTM — Unified Design Tokens · Media Tracker brand
   Single source of truth for both surfaces:
     · light "analyst" theme  -> [data-theme="light"]  (search/intelligence app)
     · dark  "wall"  theme    -> [data-theme="dark"]    (live monitoring wall)
   Strategy: ONE set of raw primitives (neutrals, brand, semantics, categoricals).
   Each theme maps the SAME primitives onto role tokens. Components only ever
   read role tokens (--bg, --surface, --text, --accent ...), never primitives,
   so they restyle correctly on either surface.
   No build step. Pure CSS custom properties. Tailwind config mirrors these hex
   values for the search app.
   Brand values mirror media-tracker-4.0 (premium-tokens.css / ui-ra-tokens.css):
   MT navy #1B3A8B primary, "ink" neutral ramp, Poppins + JetBrains Mono.
   Dark wall maps to the AirCheck "stage" palette (#0B1020 deep navy).
============================================================================ */

/* MT brand webfonts (system stacks below remain as fallback if offline). */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---- PRIMITIVES · Neutral ramp (MT "ink") — shared ------------------ */
  --slate-50:  #f7f8fa;
  --slate-100: #eef0f4;
  --slate-200: #e2e5eb;
  --slate-300: #c9ced7;
  --slate-400: #8c93a1;
  --slate-500: #5e6573;
  --slate-600: #444b58;
  --slate-700: #2a2f3a;
  --slate-800: #1a1f29;
  --slate-900: #0e1220;
  --slate-950: #090b14;

  /* ---- PRIMITIVES · Brand (Media Tracker navy) — shared ---------------- */
  /* Official MT palette (mediatracker.com.do). Light analyst uses 600      */
  /* (#1B3A8B, the official primary); dark wall uses 300 (#8BA8F0, the      */
  /* AirCheck stage accent) so it stays glanceable across a room.           */
  --blue-50:  #eef2fb;
  --blue-100: #d9e2f7;
  --blue-200: #c5d2f1;
  --blue-300: #8ba8f0;   /* dark-surface accent — MT stage accent       */
  --blue-400: #4f7be0;
  --blue-500: #2a5bd1;
  --blue-600: #1b3a8b;   /* light-surface accent — official MT navy     */
  --blue-700: #16306b;
  --blue-800: #0f2557;
  --blue-900: #0b193a;
  --blue-950: #0b1020;

  /* ---- PRIMITIVES · Semantic hues — shared ---------------------------- */
  /* positive / EN VIVO (emerald) */
  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-400: #34d399;   /* == old wall --live #36d399 */
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  /* negative / SIN SEÑAL / REC (rose) */
  --rose-50:  #fff1f3;
  --rose-100: #ffe1e6;
  --rose-200: #fecdd5;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;   /* ~ old wall --err #f0506e */
  --rose-600: #e11d48;
  --rose-700: #be123c;
  /* highlight / search <mark> / topic bars (amber) */
  --amber-100: #fef3c7;
  --amber-200: #fde68a;   /* == old <mark> */
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;   /* == old topic bars */
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* ---- PRIMITIVES · Categorical (media types) — shared ---------------- */
  /* Distinct, accessible hues for source/content categories. Independent of
     semantic meaning. Each ships a fill + ink pair per theme below.        */
  --violet-100: #ede9fe;  --violet-400: #a78bfa; --violet-700: #6d28d9;  /* TV    */
  --sky-100:    #e0f2fe;  --sky-400:    #38bdf8; --sky-700:    #0369a1;  /* Radio */
  --teal-100:   #ccfbf1;  --teal-400:   #2dd4bf; --teal-700:   #0f766e;  /* Periódico/Print */
  --fuchsia-100:#fae8ff;  --fuchsia-400:#e879f9; --fuchsia-700:#a21caf;  /* Digital */

  /* ===================================================================== */
  /* TYPE — MT brand: Poppins (UI) + JetBrains Mono (data voice).           */
  /* System stacks stay as fallback so the live tool degrades gracefully.   */
  /* Mono carries tabular figures for counts, timestamps, the wall clock.   */
  /* ===================================================================== */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Roboto Mono",
               Menlo, Consolas, monospace;

  /* Scale (px). Denser than a marketing site, looser than the old text-xs wash. */
  --fs-2xs: 11px;   /* micro badges, count superscripts        */
  --fs-xs:  12px;   /* dense meta, filter counts               */
  --fs-sm:  13px;   /* secondary text, chips                   */
  --fs-base:14px;   /* DEFAULT body / snippet                  */
  --fs-md:  15px;   /* emphasized body                         */
  --fs-lg:  17px;   /* card title                              */
  --fs-xl:  20px;   /* panel heading                           */
  --fs-2xl: 24px;   /* section heading                         */
  --fs-3xl: 30px;   /* page / display                          */
  --fs-4xl: 38px;   /* big number / hero figure                */

  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-normal: 1.5;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight: -0.011em;
  --tracking-wide:   0.08em;   /* eyebrow / overline labels (MT mono microlabel) */

  /* ===================================================================== */
  /* SPACING — 4px base grid                                                */
  /* ===================================================================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ===================================================================== */
  /* RADIUS                                                                 */
  /* ===================================================================== */
  --r-xs:   3px;   /* tiny tags                 */
  --r-sm:   6px;   /* chips, small controls     */
  --r-md:   10px;  /* inputs, buttons, cards (MT input/button radius) */
  --r-lg:   14px;  /* panels, modal (MT frame-card radius)            */
  --r-xl:   18px;  /* large surfaces                                  */
  --r-full: 999px; /* pills, status dots        */

  /* ===================================================================== */
  /* MOTION                                                                 */
  /* ===================================================================== */
  --t-fast:  120ms;
  --t-base:  180ms;
  --t-slow:  280ms;
  --ease-out:      cubic-bezier(.2, .7, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-in:       cubic-bezier(.5, 0, .9, .3);
}

/* ======================================================================= */
/* LIGHT · "ANALYST"  — search / intelligence app                          */
/* ======================================================================= */
[data-theme="light"] {
  color-scheme: light;

  /* MT lesson: page bg is pure white — cards read via border + bluish shadow,
     never via a tinted page. (slate/tinted bg was explicitly rejected.)      */
  --bg:            #ffffff;
  --bg-grad-top:   #ffffff;
  --surface:       #ffffff;     /* cards, panels             */
  --surface-2:     var(--slate-50);   /* inset / subtle fill */
  --surface-3:     var(--slate-100);  /* hover / pressed     */
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --hairline:      rgba(15, 23, 42, .06);

  --text:    var(--slate-900);   /* primary  */
  --text-2:  var(--slate-600);   /* secondary*/
  --text-3:  var(--slate-500);   /* muted    */
  --text-4:  var(--slate-400);   /* faint    */
  --text-inv:#ffffff;

  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-active: var(--blue-800);
  --accent-fg:     #ffffff;
  --accent-weak:   var(--blue-50);
  --accent-weak-bd:var(--blue-200);
  --accent-ink:    var(--blue-700);   /* accent text on light */

  --focus-ring: var(--blue-500);

  --mark-bg:   var(--amber-200);
  --mark-ink:  var(--slate-900);
  --bar-track: var(--slate-100);
  --bar-fill:  var(--amber-400);

  /* semantic role colors (fill / ink / dot) */
  --pos-fill: var(--green-100); --pos-ink: var(--green-700); --pos-solid: var(--green-500);
  --neg-fill: var(--rose-100);  --neg-ink: var(--rose-700);  --neg-solid: var(--rose-500);
  --neu-fill: var(--slate-100); --neu-ink: var(--slate-600); --neu-solid: var(--slate-400);

  /* categorical fill/ink pairs */
  --cat-tv-fill:    var(--violet-100); --cat-tv-ink:    var(--violet-700);
  --cat-radio-fill: var(--sky-100);    --cat-radio-ink: var(--sky-700);
  --cat-print-fill: var(--teal-100);   --cat-print-ink: var(--teal-700);
  --cat-digital-fill:var(--fuchsia-100);--cat-digital-ink:var(--fuchsia-700);

  /* nominal categorical palette for charts (e.g. share-of-voice by party).
     Light theme: MT chart hues (chart-theme.tsx), hue-diverse so adjacent
     series stay distinguishable on the white panel. */
  --chart-c1:#1b3a8b; --chart-c2:#d64545; --chart-c3:#18a957; --chart-c4:#d97706;
  --chart-c5:#7c3aed; --chart-c6:#0891b2; --chart-c7:#be185d;

  --live:  var(--green-600);
  --rec:   var(--rose-600);

  /* elevation — MT bluish shadows (navy-tinted, very soft) */
  --e-0: none;
  --e-1: 0 1px 2px 0 rgba(15,23,42,.04);
  --e-2: 0 2px 8px -2px rgba(27,58,139,.08), 0 1px 2px rgba(15,23,42,.04);
  --e-3: 0 8px 24px -8px rgba(27,58,139,.14), 0 2px 4px -2px rgba(15,23,42,.04);
  --e-modal: 0 32px 64px -16px rgba(14,18,32,.28), 0 0 0 1px rgba(14,18,32,.05);
}

/* ======================================================================= */
/* DARK · "WALL"  — live monitoring mosaic                                  */
/* ======================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  /* MT AirCheck "stage" palette — deep navy, deliberately on-brand */
  --bg:            #0b1020;      /* page (== --ac-stage)               */
  --bg-grad-top:   #0d1226;
  --surface:       #131a2e;      /* tiles, control bar (== --ac-stage-2) */
  --surface-2:     #0f1527;      /* inset / video letterbox            */
  --surface-3:     #1c2540;      /* hover / pressed (== --ac-stage-3)  */
  --border:        #242d4a;
  --border-strong: #313c60;
  --hairline:      rgba(255,255,255,.05);

  --text:    #eaf0ff;            /* == --ac-stage-ink   */
  --text-2:  #b6c2de;
  --text-3:  #93a0c0;            /* == --ac-stage-muted */
  --text-4:  #6f7c9d;
  --text-inv:#0b1020;

  --accent:        var(--blue-300);   /* == --ac-stage-accent #8BA8F0 */
  --accent-hover:  #a3baf4;
  --accent-active: #b9ccf8;
  --accent-fg:     #0b1020;
  --accent-weak:   rgba(139,168,240,.16);
  --accent-weak-bd:rgba(139,168,240,.36);
  --accent-ink:    var(--blue-300);

  --focus-ring: var(--blue-300);

  --mark-bg:   rgba(251,191,36,.30);
  --mark-ink:  #fde9b0;
  --bar-track: rgba(255,255,255,.07);
  --bar-fill:  var(--amber-400);

  --pos-fill: rgba(52,211,153,.16); --pos-ink: #6ee7b7; --pos-solid: var(--green-400);
  --neg-fill: rgba(244,63,94,.18);  --neg-ink: #fda4b4; --neg-solid: var(--rose-500);
  --neu-fill: rgba(255,255,255,.07);--neu-ink: var(--text-3); --neu-solid: var(--slate-500);

  --cat-tv-fill:    rgba(167,139,250,.18); --cat-tv-ink:    #c4b5fd;
  --cat-radio-fill: rgba(56,189,248,.16);  --cat-radio-ink: #7dd3fc;
  --cat-print-fill: rgba(45,212,191,.16);  --cat-print-ink: #5eead4;
  --cat-digital-fill:rgba(232,121,249,.16);--cat-digital-ink:#f0abfc;

  /* Dark theme: brighter hues so each segment reads on the deep-navy surface. */
  --chart-c1:#8ba8f0; --chart-c2:#f87171; --chart-c3:#4ade80; --chart-c4:#fbbf24;
  --chart-c5:#c4b5fd; --chart-c6:#22d3ee; --chart-c7:#f472b6;

  --live:  var(--green-400);     /* == old --live */
  --rec:   #f0506e;              /* == old --err  */

  /* elevation — on dark we lean on borders + a faint lift, not big shadows */
  --e-0: none;
  --e-1: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.4);
  --e-2: 0 2px 8px rgba(0,0,0,.45);
  --e-3: 0 10px 30px -8px rgba(0,0,0,.6);
  --e-modal: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}

/* ======================================================================= */
/* SHARED KEYFRAMES                                                         */
/* ======================================================================= */
@keyframes ctm-fade-up   { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes ctm-shimmer   { 0% { background-position:-180% 0; } 100% { background-position:180% 0; } }
@keyframes ctm-blink     { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes ctm-ping      { 0% { transform:scale(1); opacity:.7; } 75%,100% { transform:scale(2.4); opacity:0; } }
@keyframes ctm-marquee   { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes ctm-eq        { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }

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