/* ════════════════════════════════════════════════════════════════
   marketreports.cloud — Design Tokens
   Single source of truth. Drop this into the landing page and build
   everything from var(--token). Light + dark via [data-theme="dark"].

   Fonts: Inter (UI) + JetBrains Mono (data/code).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.0.20/wght.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.0.20/wght.css');

:root {
  /* ── Color: blue scale (cobalt primary) ── */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;   /* primary */
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;

  /* ── Color: slate (neutrals) ── */
  --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;
  --slate-950: #020617;

  /* ── Semantic status ── */
  --success: #10B981;  --success-bg: #ECFDF5;
  --warning: #F59E0B;  --warning-bg: #FFFBEB;
  --error:   #EF4444;  --error-bg:   #FEF2F2;
  --accent:  #06B6D4;

  /* ── Product faces (UI accents — never large fills) ── */
  --biz:          var(--blue-600);   /* "Mi negocio"     */
  --biz-subtle:   var(--blue-50);
  --comp:         #0891B2;           /* "Competencia" (cyan-600) */
  --comp-subtle:  #ECFEFF;
  --plug:         #475569;           /* "Conectar nubes" (slate-600) */
  --plug-subtle:  var(--slate-100);

  /* ── Marketplace brand (badges/dots ONLY) ── */
  --mkt-aws:        #FF9900;
  --mkt-azure:      #0078D4;
  --mkt-gcp:        #4285F4;
  --mkt-snowflake:  #29B5E8;
  --mkt-atlassian:  #0052CC;
  --mkt-github:     #181717;
  --mkt-oracle:     #C74634;

  /* ── Semantic surfaces (light) ── */
  --bg-page:      var(--slate-50);
  --bg-surface:   #ffffff;
  --bg-subtle:    var(--slate-100);
  --bg-hover:     var(--slate-100);
  --bg-inset:     var(--slate-50);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-focus:  var(--blue-600);

  --text-primary:    var(--slate-900);
  --text-secondary:  var(--slate-600);
  --text-tertiary:   var(--slate-500);
  --text-muted:      var(--slate-400);
  --text-on-primary: #ffffff;
  --text-inverse:    #ffffff;

  --primary:        var(--blue-600);
  --primary-hover:  var(--blue-700);
  --primary-subtle: var(--blue-50);
  --primary-border: var(--blue-200);

  /* ── Logo color hooks (override per surface) ── */
  --logo-line:     currentColor;
  --logo-node:     currentColor;
  --logo-hub:      var(--blue-600);
  --logo-hub-ring: var(--blue-300);

  /* ── Radii ── */
  --r-sm: 4px;    /* pills, chips        */
  --r-md: 8px;    /* inputs, buttons     */
  --r-lg: 12px;   /* cards               */
  --r-xl: 16px;   /* feature panels      */
  --r-2xl: 24px;  /* special / hero      */
  --r-full: 9999px;

  /* ── Shadows (reserved for floating layers) ── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* ── Type ── */
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Spacing scale (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-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ── Layout ── */
  --content-max: 1200px;
}

[data-theme="dark"] {
  --bg-page:      var(--slate-950);
  --bg-surface:   var(--slate-900);
  --bg-subtle:    #111827;
  --bg-hover:     var(--slate-800);
  --bg-inset:     #0a1020;

  --border:        #1f2a3e;
  --border-strong: var(--slate-700);

  --text-primary:    var(--slate-100);
  --text-secondary:  var(--slate-300);
  --text-tertiary:   var(--slate-400);
  --text-muted:      var(--slate-500);

  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-400);
  --primary-subtle: rgba(37, 99, 235, 0.12);
  --primary-border: rgba(96, 165, 250, 0.35);

  --biz:          var(--blue-400);
  --biz-subtle:   rgba(37,99,235,0.14);
  --comp:         #22D3EE;
  --comp-subtle:  rgba(8,145,178,0.16);
  --plug:         var(--slate-300);
  --plug-subtle:  rgba(148,163,184,0.12);

  --success-bg: rgba(16, 185, 129, 0.12);
  --warning-bg: rgba(245, 158, 11, 0.12);
  --error-bg:   rgba(239, 68, 68, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ─── Base reset ─── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01';
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light dark;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(37, 99, 235, 0.2); }

/* ─── Type scale utilities ─── */
.t-display  { font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.t-h1       { font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; }
.t-h2       { font-size: 20px; line-height: 1.3;  font-weight: 500; letter-spacing: -0.01em; }
.t-h3       { font-size: 16px; line-height: 1.4;  font-weight: 500; }
.t-body     { font-size: 14px; line-height: 1.55; font-weight: 400; }
.t-body-lg  { font-size: 15px; line-height: 1.55; font-weight: 400; }
.t-small    { font-size: 13px; line-height: 1.5;  font-weight: 400; }
.t-xs       { font-size: 12px; line-height: 1.4;  font-weight: 400; }
.t-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-num      { font-variant-numeric: tabular-nums; }
.t-muted     { color: var(--text-tertiary); }
.t-secondary { color: var(--text-secondary); }