/*
 * ConvertlyHub — Approved Developer Tokens
 * Source snapshot: Design System v1.14
 * Last updated: 2026-08-19
 *
 * IMPORTANT:
 * - The approved Excel workbook remains the source of truth.
 * - This file defines variables only. It intentionally does not style
 *   WordPress, Blocksy, or Elementor globally.
 */

:root {
  /* Brand / interaction */
  --ch-color-primary: #4F46E5;
  --ch-color-primary-hover: #4338CA;
  --ch-color-secondary: #06B6D4;
  --ch-color-secondary-hover: #0891B2;
  --ch-color-accent: #10B981;
  --ch-color-accent-hover: #059669;

  /* Text / surfaces */
  --ch-color-headings: #111827;
  --ch-color-body-text: #374151;
  --ch-color-muted-text: #6B7280;
  --ch-color-background: #FFFFFF;
  --ch-color-soft-background: #F8FAFC;

  /* Borders / neutral interaction */
  --ch-color-border: #E5E7EB;
  --ch-color-light-border: #EEF2F7;
  --ch-color-hover-background: #EEF2FF;
  --ch-color-hover-border: #C7D2FE;
  --ch-color-neutral-hover: #F3F4F6;

  /* Warning */
  --ch-color-warning: #F59E0B;
  --ch-color-warning-text: #92400E;
  --ch-color-warning-background: #FFFBEB;
  --ch-color-warning-border: #FDE68A;

  /* Error */
  --ch-color-error: #DC2626;
  --ch-color-error-text: #991B1B;
  --ch-color-error-background: #FEF2F2;
  --ch-color-error-border: #FECACA;

  /* Utility */
  --ch-color-backdrop-overlay: rgba(252, 242, 240, 0.8);
  --ch-color-transparent: #00000000;

  /* Fonts */
  --ch-font-en: "Inter", sans-serif;
  --ch-font-ar: "Cairo", sans-serif;
  --ch-font-code: "JetBrains Mono", monospace;

  /* Typography — desktop defaults */
  --ch-h1-size: 56px;
  --ch-h2-size: 40px;
  --ch-h3-size: 32px;
  --ch-h4-size: 24px;
  --ch-h5-size: 20px;
  --ch-h6-size: 18px;
  --ch-body-large-size: 18px;
  --ch-body-size: 16px;
  --ch-body-small-size: 14px;
  --ch-button-size: 16px;
  --ch-caption-size: 13px;

  --ch-h1-line-height: 1.15em;
  --ch-h2-line-height: 1.20em;
  --ch-h3-line-height: 1.25em;
  --ch-h4-line-height: 1.30em;
  --ch-h5-line-height: 1.35em;
  --ch-h6-line-height: 1.40em;
  --ch-body-line-height: 1.70em;
  --ch-body-small-line-height: 1.60em;
  --ch-button-line-height: 1.40em;
  --ch-caption-line-height: 1.50em;
}

/* Elementor Tablet breakpoint */
@media (max-width: 1024px) {
  :root {
    --ch-h1-size: 44px;
    --ch-h2-size: 34px;
    --ch-h3-size: 28px;
    --ch-h4-size: 22px;
    --ch-h5-size: 18px;
    --ch-h6-size: 17px;
    --ch-button-size: 16px;
    --ch-caption-size: 13px;
  }
}

/* Elementor Mobile breakpoint */
@media (max-width: 767px) {
  :root {
    --ch-h1-size: 36px;
    --ch-h2-size: 30px;
    --ch-h3-size: 24px;
    --ch-h4-size: 20px;
    --ch-h5-size: 18px;
    --ch-h6-size: 16px;
    --ch-button-size: 15px;
    --ch-caption-size: 12px;
  }
}