/* ============================================================
   BredenMaster Design System — Tokens
   Source of truth: PPT_ESTADO_EXECUTIVE_SOP_BREDENMASTER_v2 §5
   ============================================================ */

/* Web fonts ---------------------------------------------------- */
/* Inter (sans humanista — sustituto de la fuente corporativa BM,
   pendiente confirmar la oficial). JetBrains Mono para códigos
   de escenario y números técnicos. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --bm-red:           #C1272D;   /* Color de marca · línea divisora · highlights críticos */
  --bm-red-hover:     #A11F23;
  --bm-red-press:     #821a1e;
  --bm-wine:          #3C1518;   /* Color de títulos */
  --bm-white:         #FFFFFF;

  /* ---------- S&OP STANDARD (no negociables) ---------- */
  --sop-real:         #2563EB;   /* Azul · datos REALES cerrados */
  --sop-pvo:          #EA580C;   /* Naranja · forecast consensuado */
  --sop-ppto:         #64748B;   /* Gris · presupuesto */

  /* ---------- CONDITIONAL BADGE ---------- */
  --cond-bg:          #1D4ED8;   /* Azul fondo del sello */
  --cond-accent:      #FCD34D;   /* Amarillo del acento */
  --cond-text:        #FFFFFF;

  /* ---------- SEMÁFOROS KPI ---------- */
  --status-green:     #16A34A;
  --status-yellow:    #EAB308;
  --status-red:       #DC2626;
  --status-gray:      #94A3B8;   /* Pendiente / sin dato verificado */

  --status-green-bg:  #DCFCE7;
  --status-yellow-bg: #FEF9C3;
  --status-red-bg:    #FEE2E2;
  --status-gray-bg:   #F1F5F9;

  /* ---------- NEUTRALES (slate) ---------- */
  --slate-50:         #F8FAFC;
  --slate-100:        #F1F5F9;
  --slate-200:        #E2E8F0;
  --slate-300:        #CBD5E1;
  --slate-400:        #94A3B8;
  --slate-500:        #64748B;
  --slate-600:        #475569;
  --slate-700:        #334155;
  --slate-800:        #1E293B;
  --slate-900:        #0F172A;

  /* ---------- SEMANTIC ---------- */
  --bg-page:          var(--bm-white);
  --bg-surface:       var(--bm-white);
  --bg-muted:         var(--slate-50);
  --bg-sunken:        var(--slate-100);
  --fg-primary:       var(--bm-wine);
  --fg-secondary:     var(--slate-700);
  --fg-tertiary:      var(--slate-500);
  --fg-disabled:      var(--slate-400);
  --fg-on-brand:      var(--bm-white);
  --border-default:   var(--slate-200);
  --border-strong:    var(--slate-300);
  --border-focus:     var(--bm-red);
  --link:             var(--sop-real);
  --link-hover:       #1D4ED8;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:        'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* base type scale (app) */
  --text-micro:       11px;     /* footers, fuentes */
  --text-small:       13px;     /* small captions, deltas */
  --text-body:        15px;     /* body text en app */
  --text-body-lg:     16px;     /* body text en deck */
  --text-h3:          18px;
  --text-h2:          22px;
  --text-h1:          28px;     /* H1 app · top of view */
  /* deck (16:9 1280x720 design space) */
  --text-deck-h3:     24px;
  --text-deck-h2:     32px;
  --text-deck-h1:     44px;
  --text-deck-hero:   52px;
  --text-deck-kpi:    56px;     /* KPI numérico hero */

  --leading-tight:    1.15;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-loose:    1.7;

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

  /* ---------- SPACING (4px base) ---------- */
  --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-14:  56px;
  --space-20:  80px;

  /* ---------- RADII ---------- */
  --radius-sm:  4px;   /* chips, badges */
  --radius-md:  6px;   /* buttons, inputs */
  --radius-lg:  8px;   /* cards, modals */
  --radius-xl:  12px;  /* hero blocks */

  /* ---------- SHADOWS (mínimas) ---------- */
  --shadow-none:    none;
  --shadow-subtle:  0 1px 2px rgba(15,23,42,0.04);
  --shadow-menu:    0 6px 16px -4px rgba(15,23,42,0.10), 0 2px 6px -1px rgba(15,23,42,0.06);
  --shadow-modal:   0 24px 48px -8px rgba(15,23,42,0.18);

  /* ---------- TRANSITIONS ---------- */
  --t-fast:    120ms ease-out;
  --t-base:    180ms ease-out;
  --t-tab:     200ms ease-out;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-page);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.h1 { font: var(--weight-bold) var(--text-h1) / var(--leading-tight) var(--font-sans); color: var(--fg-primary); letter-spacing: -0.01em; }
.h2 { font: var(--weight-semibold) var(--text-h2) / var(--leading-snug) var(--font-sans); color: var(--fg-primary); letter-spacing: -0.005em; }
.h3 { font: var(--weight-semibold) var(--text-h3) / var(--leading-snug) var(--font-sans); color: var(--fg-primary); }

.deck-hero { font: var(--weight-bold) var(--text-deck-hero) / var(--leading-tight) var(--font-sans); color: var(--fg-primary); letter-spacing: -0.015em; }
.deck-h1   { font: var(--weight-bold) var(--text-deck-h1) / var(--leading-tight) var(--font-sans); color: var(--fg-primary); letter-spacing: -0.01em; }
.deck-h2   { font: var(--weight-semibold) var(--text-deck-h2) / var(--leading-snug) var(--font-sans); color: var(--fg-primary); }
.deck-h3   { font: var(--weight-semibold) var(--text-deck-h3) / var(--leading-snug) var(--font-sans); color: var(--fg-primary); }
.deck-kpi  { font: var(--weight-bold) var(--text-deck-kpi) / 1 var(--font-sans); color: var(--fg-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.body    { font-size: var(--text-body); color: var(--fg-secondary); }
.body-lg { font-size: var(--text-body-lg); color: var(--fg-secondary); }
.small   { font-size: var(--text-small); color: var(--fg-tertiary); }
.micro   { font-size: var(--text-micro); color: var(--fg-tertiary); letter-spacing: 0.02em; text-transform: uppercase; }

.mono    { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Title block (BM signature)
   ============================================================ */
.bm-title-block {
  border-bottom: 2px solid var(--bm-red);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
}
.bm-title-block .bm-title {
  font: var(--weight-bold) var(--text-h1) / var(--leading-tight) var(--font-sans);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
}
.bm-title-block .bm-subtitle {
  font-size: var(--text-small);
  color: var(--fg-tertiary);
  margin-top: var(--space-1);
}

/* ============================================================
   Footer pattern (deck + app)
   ============================================================ */
.bm-footer {
  font-size: var(--text-micro);
  color: var(--fg-tertiary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-2);
}