/* ============================================================
   B2 Mídia — Guia da TV Corporativa
   Design tokens — alinhados ao Sistema de Design B2 Mídia v1.0
   ============================================================ */
:root {
  /* ---- Verde (primária) ---- */
  --green-600: #40a55a;   /* primária */
  --green-500: #5cce79;
  --green-400: #7df79c;
  --green-300: #a7ffbd;
  --green-200: #ccffd9;
  --green-100: #f2fff5;
  --green-hover: #379150;

  /* ---- Verde Escuro / Teal ---- */
  --escuro-700: #005a5c;
  --escuro-600: #158c8f;
  --teal-500: #39bfc2;
  --teal-400: #6cf2f5;
  --teal-300: #90fcff;
  --institucional: #003b3d;   /* sidebars, rodapés, chrome */

  /* ---- Neutras ---- */
  --cinza-900: #141414;
  --cinza-800: #323232;
  --cinza-500: #828282;
  --cinza-400: #bebebe;
  --cinza-300: #e6e6e6;
  --cinza-100: #f5f5f5;
  --white: #ffffff;

  /* ---- Apoio ---- */
  --violet: #7e22ce;
  --violet-soft: #c084fc;
  --gold: #e8e08a;

  /* ---- Aliases semânticos (mantidos p/ compatibilidade dos componentes) ---- */
  --green: #40a55a;          /* Verde 600 */
  --green-vivid: #40a55a;    /* CTA / links / ícones */
  --green-deep: #158c8f;
  --teal: #158c8f;
  --teal-deep: #005a5c;
  --teal-darker: #003b3d;
  --mint: #a7ffbd;           /* acento claro sobre fundo escuro (Verde 300) */
  --paper: #f5f7f6;
  --ink: #141414;            /* títulos */
  --violet-accent: #7e22ce;

  --bg: var(--paper);
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --text: #323232;           /* corpo (Cinza 800) */
  --text-muted: #5c5c5c;
  --text-soft: #828282;      /* Cinza 500 */
  --line: #e6e6e6;           /* Cinza 300 */
  --line-strong: #d4d4d4;

  --on-dark: #ecf9f0;
  --on-dark-muted: #a9cfc4;

  /* ---- Status ---- */
  --ok-text: #2f7d32;  --ok-bg: #f5f7eb;  --ok-dot: #40a55a;
  --info-text: #1d4ed8; --info-bg: #e6f3ff; --info-dot: #3b82f6;
  --warn-text: #b45309; --warn-bg: #fff4e5; --warn-dot: #f5a623;
  --err-text: #b91c1c; --err-bg: #ffe6e6; --err-dot: #e5484d;

  /* ---- Gradientes (spec) ---- */
  --grad-dark: linear-gradient(135deg, #003b3d 0%, #13585e 36%, #3a2f86 76%, #7e22ce 100%);
  --grad-dark-radial: radial-gradient(120% 120% at 15% 12%, #13585e 0%, #005a5c 46%, #00393b 100%);
  --grad-green: linear-gradient(90deg, #005a5c, #40a55a);
  --grad-gold: linear-gradient(90deg, #40a55a, #9fcb7e 55%, #e8e08a);
  --grad-light: linear-gradient(120deg, #f2fff5 0%, #ffffff 46%, #f4ecfb 100%);
  --grad-mint: linear-gradient(135deg, #ecfbf0 0%, #f5f7f6 100%);

  /* ---- Tipografia ---- */
  --font-display: "DM Sans", system-ui, sans-serif;   /* títulos */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* corpo */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* rótulos / dados */

  /* escala (max-sizes do sistema, com fluidez responsiva) */
  --fs-eyebrow: 14px;
  --fs-small: 16px;          /* parágrafo pequeno */
  --fs-body: clamp(1rem, .97rem + .2vw, 1.125rem);  /* 16 → 18 */
  --fs-lead: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  --fs-h6: clamp(1.25rem, 1.18rem + .3vw, 1.375rem); /* 22 */
  --fs-h5: clamp(1.3rem, 1.2rem + .4vw, 1.5rem);     /* 24 */
  --fs-h4: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);    /* 36 */
  --fs-h3: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);   /* 44 */
  --fs-h2: clamp(2.2rem, 1.6rem + 2.6vw, 3.75rem);   /* 60 */
  --fs-h1: clamp(2.6rem, 1.7rem + 4vw, 4.25rem);     /* 68 */
  --fs-display: clamp(3.2rem, 1.8rem + 6.5vw, 7rem);

  /* line-heights (spec) */
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h4: 1.3;
  --lh-h5: 1.4;
  --lh-body: 1.5;

  --ls-eyebrow: .12em;
  --ls-tight: -0.02em;

  /* ---- Espaçamento (base 4px) ---- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;
  --sp-5xl: 96px;
  /* aliases numéricos usados nos componentes */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;
  --section-y: clamp(56px, 8vw, 120px);

  /* ---- Raio (8 UI · 16 contêiner) ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- Sombras ---- */
  --sh-sm: 0 2px 8px rgba(20, 20, 20, .05);
  --sh-md: 0 12px 30px rgba(20, 20, 20, .08);
  --sh-lg: 0 24px 60px rgba(0, 59, 61, .14);
  --sh-green: 0 14px 34px rgba(64, 165, 90, .28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 76px;
  --grid-margin: 72px;       /* margem lateral do grid (spec) */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .2s;
  --t-med: .4s;
  --t-slow: .7s;

  /* ---- z-index ---- */
  --z-progress: 60;
  --z-header: 50;
  --z-menu: 70;
  --z-curtain: 90;
}