/* ============================================================================
   shared/type-scale.css — Tokens + helpers de tipografia (padrao U8)
   ----------------------------------------------------------------------------
   Tokens canonicos de tipografia + spacing pra novo codigo usar.
   Para CODIGO NOVO sempre usar essas variaveis em vez de px hardcoded.
   ============================================================================ */

:root {
  /* Tipografia escalonada (U8) — fonte de verdade pro CampaignFlow */
  --cf-fs-xs:   10px;   /* meta tiny: timestamp, badge, code-mono */
  --cf-fs-sm:   12px;   /* small: subtitulo, helper text */
  --cf-fs-md:   13px;   /* default: corpo, label, input */
  --cf-fs-lg:   16px;   /* destaque, item de lista enfatizado */
  --cf-fs-xl:   20px;   /* h3, KPI medio */
  --cf-fs-h2:   24px;   /* h2 secao, KPI grande */
  --cf-fs-h1:   32px;   /* h1 pagina, hero */

  /* Line-height proporcional */
  --cf-lh-tight:    1.2;
  --cf-lh-normal:   1.45;
  --cf-lh-relaxed:  1.6;

  /* Spacing (multiplos de 4) — usar pra padding/margin/gap */
  --cf-sp-1:    4px;
  --cf-sp-2:    8px;
  --cf-sp-3:    12px;
  --cf-sp-4:    16px;
  --cf-sp-5:    20px;
  --cf-sp-6:    24px;
  --cf-sp-8:    32px;
  --cf-sp-10:   40px;
  --cf-sp-12:   48px;
  --cf-sp-16:   64px;

  /* Visual padrao (U9) — sombras suaves + bordas e radius */
  --cf-shadow-sm:   0 1px 2px rgba(15, 23, 42, .04);
  --cf-shadow-md:   0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --cf-shadow-lg:   0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  --cf-shadow-xl:   0 12px 36px rgba(15, 23, 42, .12);
  --cf-radius-sm:   6px;
  --cf-radius-md:   10px;
  --cf-radius-lg:   14px;
  --cf-radius-pill: 999px;

  /* Cores Ello (refletem brand + estados) */
  --cf-c-brand:     #1E5BAA;
  --cf-c-brand-2:   #143C7E;
  --cf-c-success:   #10B981;
  --cf-c-warning:   #F59E0B;
  --cf-c-danger:    #DC2626;
  --cf-c-info:      #3B82F6;
  --cf-c-purple:    #A855F7;
  --cf-c-text:      #0F172A;
  --cf-c-text-2:    #475569;
  --cf-c-text-3:    #94A3B8;
  --cf-c-border:    #E2E8F0;
  --cf-c-bg:        #FFFFFF;
  --cf-c-bg-soft:   #F8FAFC;
  --cf-c-bg-sunken: #F1F5F9;
}

/* ===== Helpers utilitarios pra novo codigo usar direto ===== */
.cf-fs-xs   { font-size: var(--cf-fs-xs); }
.cf-fs-sm   { font-size: var(--cf-fs-sm); }
.cf-fs-md   { font-size: var(--cf-fs-md); }
.cf-fs-lg   { font-size: var(--cf-fs-lg); }
.cf-fs-xl   { font-size: var(--cf-fs-xl); }
.cf-fs-h2   { font-size: var(--cf-fs-h2); }
.cf-fs-h1   { font-size: var(--cf-fs-h1); }

.cf-lh-tight   { line-height: var(--cf-lh-tight); }
.cf-lh-normal  { line-height: var(--cf-lh-normal); }
.cf-lh-relaxed { line-height: var(--cf-lh-relaxed); }

/* Card padrao (visual U9) */
.cf-card {
  background: var(--cf-c-bg);
  border-radius: var(--cf-radius-lg);
  padding: var(--cf-sp-5);
  box-shadow: var(--cf-shadow-md);
}
.cf-card-soft {
  background: var(--cf-c-bg-soft);
  border-radius: var(--cf-radius-md);
  padding: var(--cf-sp-4);
}

/* Titulo padrao */
.cf-h1 {
  font-family: 'IBM Plex Serif', serif;
  font-size: var(--cf-fs-h1);
  font-weight: 400;
  line-height: var(--cf-lh-tight);
  color: var(--cf-c-text);
  margin: 0;
}
.cf-h1 em { color: var(--cf-c-brand); font-style: italic; }

.cf-h2 {
  font-family: 'IBM Plex Serif', serif;
  font-size: var(--cf-fs-h2);
  font-weight: 400;
  line-height: var(--cf-lh-tight);
  color: var(--cf-c-text);
  margin: 0;
}

.cf-eyebrow {
  font-size: var(--cf-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cf-c-brand);
}

/* Label padrao */
.cf-label {
  font-size: var(--cf-fs-sm);
  font-weight: 500;
  color: var(--cf-c-text-2);
}

/* Mono / IDs / dados tecnicos */
.cf-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--cf-fs-xs);
}