/* Generated by scripts/tokens/build.py from Figma variables. Do not edit. */
:root,
[data-wlcp-brand="warm"] {
  --wlcp-color-bg-page: #FFFFFF;
  --wlcp-color-bg-subtle: #F3F0EA;
  --wlcp-color-bg-section-tint: #ECF1F0;
  --wlcp-color-bg-sunken: #E6E1D7;
  --wlcp-color-bg-brand: #0D4A42;
  --wlcp-color-bg-brand-hover: #072B26;
  --wlcp-color-bg-brand-subtle: #EAF2F0;
  --wlcp-color-bg-accent: #E9A23B;
  --wlcp-color-bg-accent-hover: #F4C774;
  --wlcp-color-bg-urgent: #A8233A;
  --wlcp-color-bg-urgent-subtle: #FBEAED;
  --wlcp-color-bg-zakat: #FBF1DE;
  --wlcp-color-bg-inverse: #072B26;
  --wlcp-color-bg-success: #E7F4EC;
  --wlcp-color-bg-danger: #FDECEA;
  --wlcp-color-bg-info: #E8F0FA;
  --wlcp-color-bg-disabled: #E6E1D7;
  --wlcp-color-text-default: #1B2421;
  --wlcp-color-text-muted: #5E6662;
  --wlcp-color-text-brand: #0D4A42;
  --wlcp-color-text-link: #1F6B5E;
  --wlcp-color-text-on-brand: #FFFFFF;
  --wlcp-color-text-on-accent: #1B2421;
  --wlcp-color-text-on-urgent: #FFFFFF;
  --wlcp-color-text-on-inverse: #FFFFFF;
  --wlcp-color-text-accent-on-inverse: #E9A23B;
  --wlcp-color-text-urgent: #A8233A;
  --wlcp-color-text-zakat: #8C5B06;
  --wlcp-color-text-success: #1E6B3F;
  --wlcp-color-text-danger: #B42318;
  --wlcp-color-text-info: #1D5FA8;
  --wlcp-color-text-disabled: #5E6662;
  --wlcp-color-border-default: #D3CCBE;
  --wlcp-color-border-strong: #5E6662;
  --wlcp-color-border-brand: #0D4A42;
  --wlcp-color-border-focus: #0D4A42;
  --wlcp-color-border-focus-inverse: #E9A23B;
  --wlcp-color-border-danger: #B42318;
  --wlcp-color-border-zakat: #C98B1E;
  --wlcp-color-icon-default: #1B2421;
  --wlcp-color-icon-brand: #0D4A42;
  --wlcp-color-icon-on-brand: #FFFFFF;
  --wlcp-color-motif-line: #E9A23B;
  --wlcp-color-motif-field: #0D4A42;
  --wlcp-color-secondary: #1F6B5E;
  --wlcp-motif-enabled: 1;
  --wlcp-font-family: "Readex Pro", "Noto Sans Arabic", system-ui, sans-serif;
  --wlcp-radius-control: 6px;
  --wlcp-radius-card: 4px;
  --wlcp-space-none: 0px;
  --wlcp-space-3xs: 2px;
  --wlcp-space-2xs: 4px;
  --wlcp-space-xs: 8px;
  --wlcp-space-sm: 12px;
  --wlcp-space-md: 16px;
  --wlcp-space-lg: 24px;
  --wlcp-space-xl: 32px;
  --wlcp-space-2xl: 48px;
  --wlcp-space-3xl: 64px;
  --wlcp-space-4xl: 96px;
  --wlcp-radius-none: 0px;
  --wlcp-radius-sm: 4px;
  --wlcp-radius-md: 8px;
  --wlcp-radius-lg: 16px;
  --wlcp-radius-full: 999px;
  --wlcp-size-touch-min: 44px;
  --wlcp-size-control-sm: 40px;
  --wlcp-size-control-md: 48px;
  --wlcp-size-control-lg: 56px;
  --wlcp-size-icon-sm: 16px;
  --wlcp-size-icon-md: 20px;
  --wlcp-size-icon-lg: 24px;
  --wlcp-size-border: 1px;
  --wlcp-size-border-strong: 2px;
  --wlcp-size-focus-ring: 3px;
  --wlcp-motion-duration-instant: 80ms;
  --wlcp-motion-duration-fast: 140ms;
  --wlcp-motion-duration-base: 220ms;
  --wlcp-motion-duration-slow: 360ms;
  --wlcp-motion-duration-reveal: 600ms;
  --wlcp-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --wlcp-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --wlcp-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --wlcp-shadow-raised: 0px 1px 2px 0px rgba(15, 26, 23, 0.06), 0px 2px 8px 0px rgba(15, 26, 23, 0.06);
  --wlcp-shadow-overlay: 0px 8px 24px -4px rgba(15, 26, 23, 0.16), 0px 2px 6px 0px rgba(15, 26, 23, 0.08);
  --wlcp-shadow-sticky: 0px -2px 12px 0px rgba(15, 26, 23, 0.1);
  --wlcp-layout-container: 1200px;
  --wlcp-layout-margin: 80px;
  --wlcp-layout-gutter: 32px;
  --wlcp-layout-columns: 12;
  --wlcp-layout-section-gap: 88px;
  --wlcp-size-logo-standard: 48px;
  --wlcp-size-logo-large: 72px;
  --wlcp-size-logo-xlarge: 88px;
  --wlcp-size-header-standard: 80px;
  --wlcp-size-header-large: 96px;
  --wlcp-size-header-xlarge: 104px;
  --wlcp-type-display-size: 4rem;
  --wlcp-type-display-line-height: 1.062;
  --wlcp-type-h1-size: 3rem;
  --wlcp-type-h1-line-height: 1.125;
  --wlcp-type-h2-size: 2.25rem;
  --wlcp-type-h2-line-height: 1.167;
  --wlcp-type-h3-size: 1.75rem;
  --wlcp-type-h3-line-height: 1.214;
  --wlcp-type-h4-size: 1.375rem;
  --wlcp-type-h4-line-height: 1.273;
  --wlcp-type-body-lg-size: 1.25rem;
  --wlcp-type-body-lg-line-height: 1.600;
  --wlcp-type-body-size: 1.0625rem;
  --wlcp-type-body-line-height: 1.647;
  --wlcp-type-body-sm-size: 0.9375rem;
  --wlcp-type-body-sm-line-height: 1.600;
  --wlcp-type-label-size: 1rem;
  --wlcp-type-label-line-height: 1.250;
  --wlcp-type-label-sm-size: 0.875rem;
  --wlcp-type-label-sm-line-height: 1.286;
  --wlcp-type-caption-size: 0.8125rem;
  --wlcp-type-caption-line-height: 1.385;
  --wlcp-type-stat-size: 2.75rem;
  --wlcp-type-stat-line-height: 1.091;
  --wlcp-type-display-weight: 600;
  --wlcp-type-display-tracking: -0.0625em;
  --wlcp-type-h1-weight: 600;
  --wlcp-type-h1-tracking: -0.0375em;
  --wlcp-type-h2-weight: 600;
  --wlcp-type-h2-tracking: -0.01875em;
  --wlcp-type-h3-weight: 500;
  --wlcp-type-h3-tracking: 0em;
  --wlcp-type-h4-weight: 500;
  --wlcp-type-h4-tracking: 0em;
  --wlcp-type-body-lg-weight: 300;
  --wlcp-type-body-lg-tracking: 0em;
  --wlcp-type-body-weight: 300;
  --wlcp-type-body-tracking: 0em;
  --wlcp-type-body-sm-weight: 400;
  --wlcp-type-body-sm-tracking: 0em;
  --wlcp-type-label-weight: 500;
  --wlcp-type-label-tracking: 0em;
  --wlcp-type-label-sm-weight: 500;
  --wlcp-type-label-sm-tracking: 0.00625em;
  --wlcp-type-caption-weight: 400;
  --wlcp-type-caption-tracking: 0.00625em;
  --wlcp-type-stat-weight: 600;
  --wlcp-type-stat-tracking: -0.03125em;
}

[data-wlcp-brand="cool"] {
  --wlcp-color-bg-page: #FFFFFF;
  --wlcp-color-bg-subtle: #EEF1F6;
  --wlcp-color-bg-section-tint: #EDEEF3;
  --wlcp-color-bg-sunken: #DDE3EC;
  --wlcp-color-bg-brand: #202C66;
  --wlcp-color-bg-brand-hover: #141C45;
  --wlcp-color-bg-brand-subtle: #ECEEF8;
  --wlcp-color-bg-accent: #F2B544;
  --wlcp-color-bg-accent-hover: #FDF0D2;
  --wlcp-color-bg-urgent: #B83A27;
  --wlcp-color-bg-urgent-subtle: #FCEBE8;
  --wlcp-color-bg-zakat: #FBF1DE;
  --wlcp-color-bg-inverse: #141C45;
  --wlcp-color-bg-success: #E7F4EC;
  --wlcp-color-bg-danger: #FDECEA;
  --wlcp-color-bg-info: #E8F0FA;
  --wlcp-color-bg-disabled: #DDE3EC;
  --wlcp-color-text-default: #151A2E;
  --wlcp-color-text-muted: #56607A;
  --wlcp-color-text-brand: #202C66;
  --wlcp-color-text-link: #106E7B;
  --wlcp-color-text-on-brand: #FFFFFF;
  --wlcp-color-text-on-accent: #151A2E;
  --wlcp-color-text-on-urgent: #FFFFFF;
  --wlcp-color-text-on-inverse: #FFFFFF;
  --wlcp-color-text-accent-on-inverse: #F2B544;
  --wlcp-color-text-urgent: #B83A27;
  --wlcp-color-text-zakat: #8C5B06;
  --wlcp-color-text-success: #1E6B3F;
  --wlcp-color-text-danger: #B42318;
  --wlcp-color-text-info: #1D5FA8;
  --wlcp-color-text-disabled: #56607A;
  --wlcp-color-border-default: #C7D0DD;
  --wlcp-color-border-strong: #56607A;
  --wlcp-color-border-brand: #202C66;
  --wlcp-color-border-focus: #202C66;
  --wlcp-color-border-focus-inverse: #F2B544;
  --wlcp-color-border-danger: #B42318;
  --wlcp-color-border-zakat: #C98B1E;
  --wlcp-color-icon-default: #151A2E;
  --wlcp-color-icon-brand: #202C66;
  --wlcp-color-icon-on-brand: #FFFFFF;
  --wlcp-color-motif-line: #F2B544;
  --wlcp-color-motif-field: #202C66;
  --wlcp-color-secondary: #106E7B;
  --wlcp-motif-enabled: 1;
  --wlcp-font-family: "Readex Pro", "Noto Sans Arabic", system-ui, sans-serif;
  --wlcp-radius-control: 8px;
  --wlcp-radius-card: 12px;
}

[data-wlcp-brand="neutral"] {
  --wlcp-color-bg-page: #FFFFFF;
  --wlcp-color-bg-subtle: #EFEFEC;
  --wlcp-color-bg-section-tint: #EEEFF0;
  --wlcp-color-bg-sunken: #E0E0DB;
  --wlcp-color-bg-brand: #2B3440;
  --wlcp-color-bg-brand-hover: #1A2029;
  --wlcp-color-bg-brand-subtle: #F1F3F5;
  --wlcp-color-bg-accent: #F2A900;
  --wlcp-color-bg-accent-hover: #FFC93D;
  --wlcp-color-bg-urgent: #B42318;
  --wlcp-color-bg-urgent-subtle: #FDECEA;
  --wlcp-color-bg-zakat: #FBF1DE;
  --wlcp-color-bg-inverse: #1A2029;
  --wlcp-color-bg-success: #E7F4EC;
  --wlcp-color-bg-danger: #FDECEA;
  --wlcp-color-bg-info: #E8F0FA;
  --wlcp-color-bg-disabled: #E0E0DB;
  --wlcp-color-text-default: #1A1D21;
  --wlcp-color-text-muted: #5A5F66;
  --wlcp-color-text-brand: #2B3440;
  --wlcp-color-text-link: #1D5FA8;
  --wlcp-color-text-on-brand: #FFFFFF;
  --wlcp-color-text-on-accent: #1A1D21;
  --wlcp-color-text-on-urgent: #FFFFFF;
  --wlcp-color-text-on-inverse: #FFFFFF;
  --wlcp-color-text-accent-on-inverse: #F2A900;
  --wlcp-color-text-urgent: #B42318;
  --wlcp-color-text-zakat: #8C5B06;
  --wlcp-color-text-success: #1E6B3F;
  --wlcp-color-text-danger: #B42318;
  --wlcp-color-text-info: #1D5FA8;
  --wlcp-color-text-disabled: #5A5F66;
  --wlcp-color-border-default: #CBCBC4;
  --wlcp-color-border-strong: #5A5F66;
  --wlcp-color-border-brand: #2B3440;
  --wlcp-color-border-focus: #2B3440;
  --wlcp-color-border-focus-inverse: #F2A900;
  --wlcp-color-border-danger: #B42318;
  --wlcp-color-border-zakat: #C98B1E;
  --wlcp-color-icon-default: #1A1D21;
  --wlcp-color-icon-brand: #2B3440;
  --wlcp-color-icon-on-brand: #FFFFFF;
  --wlcp-color-motif-line: #F2A900;
  --wlcp-color-motif-field: #2B3440;
  --wlcp-color-secondary: #1D5FA8;
  --wlcp-motif-enabled: 0;
  --wlcp-font-family: "Readex Pro", "Noto Sans Arabic", system-ui, sans-serif;
  --wlcp-radius-control: 4px;
  --wlcp-radius-card: 2px;
}

@media (max-width: 1023px) {
  :root {
    --wlcp-layout-container: 720px;
    --wlcp-layout-margin: 40px;
    --wlcp-layout-gutter: 24px;
    --wlcp-layout-columns: 8;
    --wlcp-layout-section-gap: 72px;
    --wlcp-size-logo-standard: 40px;
    --wlcp-size-logo-large: 52px;
    --wlcp-size-logo-xlarge: 60px;
    --wlcp-size-header-standard: 64px;
    --wlcp-size-header-large: 72px;
    --wlcp-size-header-xlarge: 76px;
    --wlcp-type-display-size: 3.25rem;
    --wlcp-type-display-line-height: 1.077;
    --wlcp-type-h1-size: 2.5rem;
    --wlcp-type-h1-line-height: 1.150;
    --wlcp-type-h2-size: 2rem;
    --wlcp-type-h2-line-height: 1.188;
    --wlcp-type-h3-size: 1.625rem;
    --wlcp-type-h3-line-height: 1.231;
    --wlcp-type-h4-size: 1.25rem;
    --wlcp-type-h4-line-height: 1.300;
    --wlcp-type-body-lg-size: 1.1875rem;
    --wlcp-type-body-lg-line-height: 1.579;
    --wlcp-type-body-size: 1.0625rem;
    --wlcp-type-body-line-height: 1.647;
    --wlcp-type-body-sm-size: 0.9375rem;
    --wlcp-type-body-sm-line-height: 1.600;
    --wlcp-type-label-size: 1rem;
    --wlcp-type-label-line-height: 1.250;
    --wlcp-type-label-sm-size: 0.875rem;
    --wlcp-type-label-sm-line-height: 1.286;
    --wlcp-type-caption-size: 0.8125rem;
    --wlcp-type-caption-line-height: 1.385;
    --wlcp-type-stat-size: 2.5rem;
    --wlcp-type-stat-line-height: 1.100;
  }
}

@media (max-width: 599px) {
  :root {
    --wlcp-layout-container: 343px;
    --wlcp-layout-margin: 16px;
    --wlcp-layout-gutter: 16px;
    --wlcp-layout-columns: 4;
    --wlcp-layout-section-gap: 56px;
    --wlcp-size-logo-standard: 40px;
    --wlcp-size-logo-large: 52px;
    --wlcp-size-logo-xlarge: 60px;
    --wlcp-size-header-standard: 64px;
    --wlcp-size-header-large: 72px;
    --wlcp-size-header-xlarge: 76px;
    --wlcp-type-display-size: 2.5rem;
    --wlcp-type-display-line-height: 1.150;
    --wlcp-type-h1-size: 2.125rem;
    --wlcp-type-h1-line-height: 1.176;
    --wlcp-type-h2-size: 1.75rem;
    --wlcp-type-h2-line-height: 1.214;
    --wlcp-type-h3-size: 1.375rem;
    --wlcp-type-h3-line-height: 1.273;
    --wlcp-type-h4-size: 1.1875rem;
    --wlcp-type-h4-line-height: 1.316;
    --wlcp-type-body-lg-size: 1.125rem;
    --wlcp-type-body-lg-line-height: 1.556;
    --wlcp-type-body-size: 1rem;
    --wlcp-type-body-line-height: 1.625;
    --wlcp-type-body-sm-size: 0.875rem;
    --wlcp-type-body-sm-line-height: 1.571;
    --wlcp-type-label-size: 1rem;
    --wlcp-type-label-line-height: 1.250;
    --wlcp-type-label-sm-size: 0.875rem;
    --wlcp-type-label-sm-line-height: 1.286;
    --wlcp-type-caption-size: 0.8125rem;
    --wlcp-type-caption-line-height: 1.385;
    --wlcp-type-stat-size: 2.125rem;
    --wlcp-type-stat-line-height: 1.118;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wlcp-motion-duration-instant: 80ms;
    --wlcp-motion-duration-fast: 0ms;
    --wlcp-motion-duration-base: 0ms;
    --wlcp-motion-duration-slow: 0ms;
    --wlcp-motion-duration-reveal: 0ms;
  }
}