/* ==========================================================================
   Design tokens — extracted from the Canva "Digital Craft Website" designs.
   Change a value here and it updates everywhere on the site.
   ========================================================================== */

:root {
  /* Brand colors */
  --color-primary: #2d3ff2;
  --color-primary-hover: #1f30d9;
  --color-primary-soft: #f0f1ff;
  --color-primary-border: #b9bdfa;
  --color-on-primary: #ffffff;
  --color-on-primary-soft: #c9cdff;

  /* Neutrals */
  --color-text: #090909;
  --color-text-soft: #323232;
  /* Canva uses #898992 for muted text; darkened to pass WCAG AA (4.5:1) on white. */
  --color-muted: #63636d;
  --color-bg: #ffffff;
  --color-surface: #f6f6f8;
  --color-border: #e7e7ee;

  /* Status */
  --color-success-soft: #e3f8ea;
  --color-success-text: #157a3c;
  --color-danger: #c62828;
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #1eb956;
  --color-on-whatsapp: #ffffff;

  /* Typography */
  --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-body: var(--font-latin);
  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-h3: 1.1875rem;   /* 19px */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1rem + 2.8vw, 4rem); /* 36px phone → 54px laptop → 64px large monitor */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  /* Vertical padding on each side of a section (8px grid).
     Phones & iPads: compact — 64px between two sections.
     Desktop: 4rem, and each section also fills the screen (see "Full-screen sections" in layout.css). */
  --space-section: 2rem;

  /* Shape */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(9 9 9 / 0.06);
  --shadow-md: 0 8px 24px rgb(20 24 80 / 0.08);
  --shadow-lg: 0 18px 48px rgb(20 24 80 / 0.14);

  /* Layout */
  --container: 80rem; /* 1280px — total container width, side padding included */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-height: 4.5rem;

  /* Motion */
  --duration: 200ms;
  --duration-hover: 350ms;
  --duration-color: 350ms; /* color changes (buttons, links, chips) */
  --ease-color: cubic-bezier(0.4, 0, 0.2, 1); /* even start and end, so colors blend smoothly */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot, feels playful */

  /* Hero photo ratio — matches the source image (2000×1334 = 3:2). */
  --hero-ratio: 3 / 2;
}

@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  :root {
    --space-section: 4rem;
  }
}

html[lang="ar"] {
  --font-body: var(--font-arabic);
  --line-height-body: 1.8;
  --line-height-heading: 1.4;
}