/**
 * variables.css
 * ─────────────────────────────────────────────────────────────────
 * CSS Custom Properties (design tokens) for the Dentek Systems site.
 *
 * HOW TO EDIT:
 *  - Update any value here and it propagates automatically site-wide.
 *  - Colors, fonts, spacing, and breakpoints are all defined here.
 * ─────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Colors ─────────────────────────────────────────────────── */

  /** Primary dark navy — used for top bar, footer, dark sections */
  --color-navy: #16163f;

  /** Slightly darker navy — used for dark hero card */
  --color-dark-hero: #0d1b3e;

  /** Accent lavender/blue — used for uppercase label headings */
  --color-accent: #93a2f4;

  /** Cyan / sky-blue — used for CTA buttons and links */
  --color-cyan: #4ebbf5;

  /** Very light blue-white — page background */
  --color-page-bg: #f8f9ff;

  /** Light periwinkle — card and section backgrounds */
  --color-light-card: #eef0fb;

  /** Cream/warm beige — newsletter section background */
  --color-cream: #fef5e4;

  /** Main body text */
  --color-text: #333333;

  /** White */
  --color-white: #ffffff;

  /** Light gray text — used in cards and secondary text */
  --color-text-muted: #666666;

  /** Inner page banner gradient start (blue) */
  --color-banner-start: #5070d0;

  /** Inner page banner gradient end (purple) */
  --color-banner-end: #7b5ea7;

  /* ── Typography ─────────────────────────────────────────────── */

  /** Saira — for all headings (h1–h4) */
  --font-heading: 'Saira', sans-serif;

  /** Poppins — for body text, paragraphs, labels */
  --font-body: 'Poppins', sans-serif;

  /** Montserrat — for buttons and CTAs */
  --font-button: 'Montserrat', sans-serif;

  /** Base font size */
  --font-size-base: 14px;

  /* ── Spacing ─────────────────────────────────────────────────── */

  /** Maximum content width */
  --max-width: 1200px;

  /** Standard section vertical padding */
  --section-padding-y: 80px;

  /** Standard container horizontal padding */
  --container-padding-x: 24px;

  /* ── Borders & Radii ─────────────────────────────────────────── */

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* ── Shadows ─────────────────────────────────────────────────── */

  --shadow-card: 0 4px 24px rgba(22, 22, 63, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(22, 22, 63, 0.15);

  /* ── Transitions ─────────────────────────────────────────────── */

  --transition-base: 0.25s ease;

  /* ── Breakpoints (reference only — use media queries directly) ─ */
  /* Mobile:  < 768px  */
  /* Tablet:  768–1024px */
  /* Desktop: > 1024px */
}