/*
  Platforms Code / كود المنصات v1.0 — authoritative Public Front foundation.
  Freeze: docs/dga-official/official-checklist-audit/15-D02-Authoritative-Reference-Freeze.md
  Official: https://design.dga.gov.sa/  (الإصدار 1.0)
  Official stylesheet identity: https://design.dga.gov.sa/assets/index-PDaQ7SHU.css
  Observed 10 September 2026.

  This file is the runtime token source. Do not treat other dga-* files as
  the specification. Keep in sync with docs/dga-official/dga-tokens.css.
*/

@font-face {
  font-family: IBMPlexSansArabic;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2") format("woff2");
}

@font-face {
  font-family: IBMPlexSansArabic;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2") format("woff2");
}

@font-face {
  font-family: IBMPlexSansArabic;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: IBMPlexSansArabic;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2") format("woff2");
}

:root {
  --dga-platforms-code-version: "1.0";

  --colors-primary-sa-flag-25: #f7fdf9;
  --colors-primary-sa-flag-50: #f3fcf6;
  --colors-primary-sa-flag-100: #dff6e7;
  --colors-primary-sa-flag-200: #b8eacb;
  --colors-primary-sa-flag-300: #88d8ad;
  --colors-primary-sa-flag-400: #54c08a;
  --colors-primary-sa-flag-500: #25935f;
  --colors-primary-sa-flag-600-primary: #1b8354;
  --colors-primary-sa-flag-700: #166a45;
  --colors-primary-sa-flag-800: #14573a;
  --colors-primary-sa-flag-900: #104631;
  --colors-primary-sa-flag-950: #092a1e;

  --colors-brand-25: #f7fdf9;
  --colors-brand-50: #f3fcf6;
  --colors-brand-100: #dff6e7;
  --colors-brand-200: #b8eacb;
  --colors-brand-600: #1b8354;
  --background-primary: var(--colors-primary-sa-flag-600-primary);
  --background-sa-flag: var(--colors-primary-sa-flag-600-primary);

  --colors-secondary-gold-600-primary: #dba102;
  --colors-tertiary-lavendar-500-primary: #80519f;

  --colors-error-25: #fffbfa;
  --colors-error-600: #d92d20;
  --colors-error-700: #b42318;
  --colors-error-border: #b42318;
  --colors-warning-600: #dc6803;
  --colors-success-600: #079455;
  --colors-info-600: #1570ef;

  --colors-gray-25: #fafafa;
  --colors-gray-50: #f5f5f6;
  --colors-gray-100: #f0f1f1;
  --colors-gray-200: #ececed;
  --colors-gray-300: #cecfd2;
  --colors-gray-400: #94969c;
  --colors-gray-500: #85888e;
  --colors-gray-600: #61646c;
  --colors-gray-700: #333741;
  --colors-gray-800: #1f242f;
  --colors-gray-900: #161b26;
  --colors-gray-950: #0c111d;

  --colors-base-white: #ffffff;
  --colors-base-black: #161616;
  --colors-text-primary: var(--colors-gray-900);
  --colors-fg-primary: var(--colors-gray-900);
  --text-primary-paragraph: #384250;
  --text-secondary-paragraph: #6c727e;

  --alpha-white-20: rgba(255, 255, 255, 0.2);
  --alpha-white-30: rgba(255, 255, 255, 0.3);
  --alpha-white-60: rgba(255, 255, 255, 0.6);
  --alpha-white-70: rgba(255, 255, 255, 0.7);
  --alpha-white-80: rgba(255, 255, 255, 0.8);
  --alpha-white-90: rgba(255, 255, 255, 0.9);
  --colors-alpha-alpha-white-30: var(--alpha-white-30);
  --colors-alpha-alpha-white-60: var(--alpha-white-60);
  --colors-alpha-alpha-white-80: var(--alpha-white-80);
  --colors-alpha-alpha-white-90: var(--alpha-white-90);

  --button-background-primary-default: var(--colors-primary-sa-flag-600-primary);
  --button-background-primary-hovered: var(--colors-primary-sa-flag-700);
  --button-background-primary-pressed: var(--colors-primary-sa-flag-900);
  --button-background-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --button-background-oncolor-default: var(--colors-base-black);
  --button-background-oncolor-hovered: var(--alpha-white-80);
  --button-background-oncolor-pressed: var(--alpha-white-60);
  --button-background-oncolor-focused: var(--colors-base-white);

  --link-primary: var(--colors-primary-sa-flag-600-primary);
  --link-primary-hovered: var(--colors-primary-sa-flag-400);
  --link-primary-pressed: var(--colors-primary-sa-flag-300);
  --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --link-primary-visited: var(--colors-primary-sa-flag-800);

  --text-oncolor-primary: var(--colors-base-white);
  --text-oncolor-secondary: var(--alpha-white-80);
  --text-oncolor-tertiary: var(--alpha-white-70);
  --text-default-oncolor-disabled: rgba(22, 22, 22, 0.4);
  --link-oncolor: var(--colors-base-white);
  --link-oncolor-hovered: var(--colors-alpha-alpha-white-80);
  --link-oncolor-pressed: var(--colors-alpha-alpha-white-60);
  --link-oncolor-focused: var(--colors-base-white);
  --link-oncolor-visited: var(--colors-alpha-alpha-white-90);
  --link-oncolor-disabled: var(--colors-alpha-alpha-white-30);
  --icon-oncolor: var(--colors-base-white);
  --icon-default-oncolor-disabled: var(--colors-base-white);
  --background-surface-oncolor: var(--colors-base-white);
  --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);

  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-40: 160px;

  --spacing-none: var(--spacing-0);
  --spacing-xxs: 2px;
  --spacing-xs: var(--spacing-1);
  --spacing-sm: 6px;
  --spacing-md: var(--spacing-2);
  --spacing-lg: var(--spacing-3);
  --spacing-xl: var(--spacing-4);
  --spacing-2xl: var(--spacing-5);
  --spacing-3xl: var(--spacing-6);
  --spacing-4xl: var(--spacing-8);
  --spacing-5xl: var(--spacing-10);
  --spacing-6xl: var(--spacing-12);
  --spacing-7xl: var(--spacing-16);
  --spacing-8xl: var(--spacing-20);
  --spacing-9xl: var(--spacing-24);
  --spacing-10xl: var(--spacing-32);
  --spacing-11xl: var(--spacing-40);

  --container-padding-mobile: var(--spacing-xl);
  --container-padding-desktop: var(--spacing-4xl);
  --container-max-width-desktop: 1280px;
  --paragraph-max-width: 720px;

  --breakpoint-sm: 600px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;

  --radius-none: 0;
  --radius-xxs: 2px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --components-card-radius: 16px;

  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, .05);
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, .06), 0px 1px 3px 0px rgba(16, 24, 40, .1);
  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, .06), 0px 4px 8px -2px rgba(16, 24, 40, .1);
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, .03), 0px 12px 16px -4px rgba(16, 24, 40, .08);
  --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, .03), 0px 20px 24px -4px rgba(16, 24, 40, .08);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, .18);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, .14);

  --font-family-primary: IBMPlexSansArabic, "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-display-2xl: 4.5rem;
  --line-height-display-2xl: 5.625rem;
  --font-size-display-xl: 3.75rem;
  --line-height-display-xl: 4.5rem;
  --font-size-display-lg: 3rem;
  --line-height-display-lg: 3.75rem;
  --font-size-display-md: 2.25rem;
  --line-height-display-md: 2.75rem;
  --font-size-display-sm: 1.875rem;
  --line-height-display-sm: 2.375rem;
  --font-size-display-xs: 1.5rem;
  --line-height-display-xs: 2rem;
  --letter-spacing-display: -0.02em;

  --font-size-text-xl: 1.25rem;
  --line-height-text-xl: 1.875rem;
  --font-size-text-lg: 1.125rem;
  --line-height-text-lg: 1.75rem;
  --font-size-text-md: 1rem;
  --line-height-text-md: 1.5rem;
  --font-size-text-sm: 0.875rem;
  --line-height-text-sm: 1.25rem;
  --font-size-text-xs: 0.75rem;
  --line-height-text-xs: 1.125rem;
  --font-size-text-2xs: 0.625rem;
  --line-height-text-2xs: 0.875rem;

  --focus-ring-color: var(--colors-base-black);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}