:root {
  --da-primary: hsl(157 76% 38%);
  --da-primary-hover: hsl(157 76% 42%);
  --da-primary-soft: hsl(157 76% 38% / 9%);
  --da-secondary: hsl(157 71% 25%);
  --da-body: hsl(0 0% 100%);
  --da-surface: hsl(0 0% 100%);
  --da-surface-tone: hsl(160 5% 97%);
  --da-surface-strong: hsl(157 3% 94%);
  --da-text: hsl(157 3% 23%);
  --da-text-soft: hsl(157 3% 35%);
  --da-text-muted: hsl(157 3% 54%);
  --da-border: hsl(0 0% 0% / 9%);
  --da-border-soft: hsl(0 0% 0% / 5%);
  --da-white: #fff;

  --da-shell-max: 1408px;
  --da-content-max: 1264px;
  --da-article-max: 804px;
  --da-download-content-max: 580px;
  --da-article-sidebar: 380px;

  --da-page-pad: 20px;
  --da-grid-gap: 8px;
  --da-section-gap: 32px;
  --da-group-gap: 38px;
  --da-header-height: 72px;
  --da-header-secondary-height: 64px;

  --da-radius-xs: 10px;
  --da-radius-sm: 14px;
  --da-radius-md: 20px;
  --da-radius-lg: 28px;
  --da-icon-radius: 22%;

  --da-shadow-card: 0 0 1px 0 hsl(0 0% 0% / 5%), 0 2px 16px -4px hsl(0 0% 0% / 15%);
  --da-shadow-card-hover: 0 8px 24px -8px hsl(0 0% 0% / 22%);
  --da-shadow-overlay: 0 16px 40px -4px hsl(0 0% 0% / 10%), 0 0 0 1px hsl(0 0% 0% / 5%);

  --da-font-ui: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --da-font-size: 16px;
  --da-line-height: 1.65;
  --da-title-page: 26px;
  --da-title-category: 26px;
  --da-title-file: 22px;
  --da-title-section: 20px;
  --da-description: 16px;
  --da-motion-fast: 160ms;
  --da-motion-normal: 220ms;
}

@media (min-width: 48rem) {
  :root {
    --da-page-pad: 24px;
    --da-grid-gap: 16px;
    --da-description: 18px;
    --da-group-gap: 42px;
  }
}

@media (min-width: 64rem) {
  :root {
    --da-header-height: 80px;
    --da-title-page: 52px;
    --da-title-category: 32px;
    --da-title-file: 28px;
  }
}

@media (min-width: 80rem) {
  :root { --da-page-pad: 72px; }
}