/* ============================================
   TOKENS — Design System da Digital Contabilidade
   ============================================ */

:root {
  /* ===== CORES INSTITUCIONAIS ===== */
  --color-blue-primary: #1A91CC;
  --color-blue-deep: #0F6B99;
  --color-blue-soft: #E8F4FA;

  --color-gray-text: #3D3D3E;
  --color-gray-institutional: #575758;
  --color-gray-medium: #8A8A8B;
  --color-gray-line: #E5E5E6;
  --color-gray-mist: #F7F7F8;

  --color-off-white: #FAFBFC;
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1FB855;

  /* ===== TIPOGRAFIA ===== */
  --font-primary: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-secondary: 'Open Sans', system-ui, -apple-system, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-eyebrow: 13px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-button: 15px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-relaxed: 1.5;
  --lh-loose: 1.7;

  --tracking-eyebrow: 3px;

  /* ===== ESPAÇAMENTO (múltiplos de 8px) ===== */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 100px;
  --space-5xl: 120px;

  /* ===== LAYOUT ===== */
  --container-max: 1280px;
  --container-padding: 80px;
  --text-max-width: 720px;

  /* ===== BORDERS & RADIUS ===== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --border-thin: 1px solid var(--color-gray-line);
  --border-active: 1px solid var(--color-blue-primary);

  /* ===== SHADOWS — Sistema em camadas (premium) ===== */
  /* Sombras compostas: ambient (difusa) + key (direcional) */
  --shadow-xs:
    0 1px 2px rgba(15, 107, 153, 0.04),
    0 1px 1px rgba(15, 107, 153, 0.06);

  --shadow-sm:
    0 2px 4px rgba(15, 107, 153, 0.04),
    0 4px 8px rgba(15, 107, 153, 0.06);

  --shadow-card:
    0 1px 2px rgba(15, 107, 153, 0.03),
    0 4px 12px rgba(15, 107, 153, 0.05),
    0 12px 24px rgba(15, 107, 153, 0.04);

  --shadow-card-hover:
    0 2px 4px rgba(15, 107, 153, 0.06),
    0 12px 24px rgba(15, 107, 153, 0.10),
    0 24px 48px rgba(15, 107, 153, 0.08);

  --shadow-lg:
    0 4px 8px rgba(15, 107, 153, 0.04),
    0 16px 32px rgba(15, 107, 153, 0.08),
    0 32px 64px rgba(15, 107, 153, 0.10);

  --shadow-xl:
    0 8px 16px rgba(15, 107, 153, 0.05),
    0 24px 48px rgba(15, 107, 153, 0.10),
    0 48px 96px rgba(15, 107, 153, 0.12);

  --shadow-header:
    0 1px 2px rgba(15, 107, 153, 0.04),
    0 4px 16px rgba(15, 107, 153, 0.06);

  --shadow-dropdown:
    0 4px 12px rgba(15, 107, 153, 0.06),
    0 16px 48px rgba(15, 107, 153, 0.12);

  --shadow-whatsapp:
    0 4px 12px rgba(37, 211, 102, 0.22),
    0 12px 32px rgba(37, 211, 102, 0.28);

  --shadow-dark-card:
    0 4px 16px rgba(0, 0, 0, 0.20),
    0 16px 48px rgba(0, 0, 0, 0.30);

  /* ===== GRADIENTES SOFISTICADOS ===== */
  --gradient-brand:
    linear-gradient(135deg, var(--color-blue-primary) 0%, var(--color-blue-deep) 100%);

  --gradient-brand-soft:
    linear-gradient(135deg, #F4FAFD 0%, #E8F4FA 100%);

  --gradient-dark-scene:
    linear-gradient(180deg, #0A4D73 0%, #0F6B99 45%, #1A91CC 100%);

  --gradient-subtle-off:
    linear-gradient(180deg, var(--color-off-white) 0%, #F4F7FA 100%);

  --gradient-hero-wash:
    radial-gradient(ellipse at top left, rgba(232, 244, 250, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(232, 244, 250, 0.4) 0%, transparent 50%);

  --gradient-divider:
    linear-gradient(90deg, transparent 0%, var(--color-gray-line) 20%, var(--color-gray-line) 80%, transparent 100%);

  /* ===== TRANSITIONS ===== */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-swift-in: cubic-bezier(0.55, 0, 0.1, 1);

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* ===== Z-INDEX ===== */
  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-menu: 200;
  --z-mobile-overlay: 199;
  --z-whatsapp-fab: 90;
}

/* ===== RESPONSIVE TOKENS ===== */

@media (max-width: 1279px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-h3: 26px;
    --container-padding: 40px;
    --space-5xl: 100px;
  }
}

@media (max-width: 1023px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-body: 16px;
    --container-padding: 32px;
    --space-5xl: 80px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 38px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --container-padding: 24px;
    --space-5xl: 64px;
    --space-3xl: 48px;
    --lh-loose: 1.65;
  }
}

@media (max-width: 599px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-eyebrow: 12px;
    --container-padding: 20px;
    --space-5xl: 56px;
  }
}

@media (max-width: 479px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-h4: 17px;
    --container-padding: 16px;
    --space-5xl: 48px;
  }
}

@media (max-width: 359px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 18px;
    --fs-body: 15px;
    --container-padding: 12px;
    --space-5xl: 40px;
  }
}