/* ==========================================================================
   Qasem Dentistry — Design Tokens
   Single source of truth for color, spacing, and type values.
   Do not hardcode these values anywhere else in the codebase.
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --bg-primary: #F7F5F1;
  --bg-dark: #202A2B;
  --text-primary: #1C2733;
  --text-inverse: #F7F5F1;
  --secondary-blue: #3E5C68;
  --secondary-sand: #E8E1D5;
  --accent-green: #2F4B3C;
  --accent-green-hover: #28402F;
  --neutral-gray: #8B8781;
  --neutral-gray-20: rgba(139, 135, 129, 0.2);
  --neutral-gray-light: #A8A49D;

  /* ---- Spacing scale (base unit 8px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 120px;
  --space-10: 140px;

  /* ---- Section vertical padding ---- */
  --section-padding-mobile: 56px;
  --section-padding-desktop: 96px;

  /* ---- Type scale — mobile (default) ---- */
  --h1-size: 28px;
  --h2-size: 22px;
  --h3-size: 18px;
  --body-size: 15.5px;
  --caption-size: 13px;

  /* ---- Line heights ---- */
  --lh-heading: 1.3;
  --lh-h2: 1.4;
  --lh-h3: 1.4;
  --lh-body: 1.7;
  --lh-caption: 1.6;

  /* ---- Border / radius ---- */
  --radius-button: 4px;
  --radius-circle: 50%;
  --border-hairline: 1px solid var(--neutral-gray-20);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* ---- Layout ---- */
  --container-max-mobile: 100%;
  --container-max-tablet: 720px;
  --container-max-desktop: 1120px;
  --container-max-large: 1200px;
  --side-padding-mobile: 20px;
  --side-padding-tablet: 40px;
  --side-padding-desktop: 64px;
}

/* ---- Type scale — desktop (≥1024px) ---- */
@media (min-width: 1024px) {
  :root {
    --h1-size: 48px;
    --h2-size: 32px;
    --h3-size: 22px;
    --body-size: 18px;
    --caption-size: 14px;
  }
}