/*
 * DGA Platforms Code - Design Tokens
 * Generated: 2026-05-05
 * Source: Figma Community files (CSS export, parsed from 200k+ lines)
 * All hex values confirmed from foundations-colors.css, component-header.css,
 * component-footer.css, component-button.css, component-breadcrumb.css
 */

/* =============================================================
   COLORS
   ============================================================= */

:root {

  /* --- Neutral (confirmed from foundations-colors.css) --- */
  --color-neutral-25:  #FCFCFD;
  --color-neutral-50:  #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D2D6DB;
  --color-neutral-400: #9DA4AE;
  --color-neutral-500: #6C737F;
  --color-neutral-600: #4D5761;
  --color-neutral-700: #384250;
  --color-neutral-800: #1F2A37;
  --color-neutral-900: #111927;
  --color-neutral-950: #0D121C;

  /* --- Primary Green (confirmed from foundations-colors.css) --- */
  --color-primary-25:  #F7FDF9;
  --color-primary-50:  #F3FCF6;
  --color-primary-100: #ECFDF3;
  --color-primary-200: #DFF6E7;
  --color-primary-300: #B8EACB;
  --color-primary-400: #88D8AD;
  --color-primary-500: #54C08A;
  --color-primary-600: #25935F;
  --color-primary-700: #1B8354;
  --color-primary-800: #079455;
  --color-primary-900: #067647;
  --color-primary-925: #166A45;
  --color-primary-950: #14573A;
  --color-primary-975: #085D3A;
  --color-primary-dark: #074D31;
  --color-primary-darker: #053321;
  --color-primary-action: #067647;

  /* --- Error / Red (confirmed from component-button.css) --- */
  --color-error-25:  #FFFBFA;
  --color-error-50:  #FEF3F2;
  --color-error-100: #FEE4E2;
  --color-error-200: #FECDCA;
  --color-error-300: #FDA29B;
  --color-error-400: #F97066;
  --color-error-500: #F04438;
  --color-error-600: #D92D20;
  --color-error-700: #B42318;
  --color-error-800: #912018;
  --color-error-900: #7A271A;
  --color-error-950: #55160C;

  /* --- Warning / Yellow (confirmed from foundations-colors.css) --- */
  --color-warning-25:  #FFFEF7;
  --color-warning-50:  #FFFCF5;
  --color-warning-100: #FFFCE6;
  --color-warning-200: #FEDF89;
  --color-warning-300: #FEC84B;
  --color-warning-400: #FDB022;
  --color-warning-500: #F79009;
  --color-warning-600: #DC6803;
  --color-warning-700: #B54708;
  --color-warning-800: #945C01;
  --color-warning-900: #7A2E0E;
  --color-warning-950: #4E1D09;

  /* --- Info / Blue (confirmed from foundations-colors.css) --- */
  --color-info-25:  #F5FAFF;
  --color-info-50:  #EFF8FF;
  --color-info-100: #D1E9FF;
  --color-info-200: #B2DDFF;
  --color-info-300: #84CAFF;
  --color-info-400: #53B1FD;
  --color-info-500: #2E90FA;
  --color-info-600: #1570EF;
  --color-info-700: #175CD3;
  --color-info-800: #1849A9;
  --color-info-900: #194185;
  --color-info-950: #102A56;

  /* --- Semantic / Usage tokens --- */
  --color-brand:            var(--color-primary-dark);   /* #074D31 - header/nav bg */
  --color-brand-action:     var(--color-primary-action); /* #067647 - CTA buttons */
  --color-brand-hover:      #104631;                     /* button hover state */
  --color-brand-pressed:    #14573A;                     /* button pressed state */

  --color-text-primary:     #1F2A37;
  --color-text-secondary:   #384250;
  --color-text-tertiary:    #6C737F;
  --color-text-placeholder: #9DA4AE;
  --color-text-disabled:    #9DA4AE;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        var(--color-primary-dark);
  --color-text-error:       var(--color-error-700);

  --color-bg-page:          #FFFFFF;
  --color-bg-subtle:        #F9FAFB;
  --color-bg-muted:         #F3F4F6;
  --color-bg-green-subtle:  #F7FDF9;
  --color-bg-green-light:   #F3FCF6;
  --color-bg-green-medium:  #ECFDF3;

  --color-border-light:     #E5E7EB;
  --color-border-default:   #D2D6DB;
  --color-border-strong:    #9DA4AE;
  --color-border-focus:     var(--color-primary-dark);

  --color-icon-default:     #384250;
  --color-icon-muted:       #9DA4AE;
  --color-icon-inverse:     #FFFFFF;
  --color-icon-brand:       var(--color-primary-dark);

  /* Header / Nav (confirmed from component-header.css) */
  --color-header-bg:        #074D31;
  --color-header-text:      #FFFFFF;
  --color-header-link:      #FFFFFF;
  --color-header-divider:   #D2D6DB;
  --color-header-hover-bg:  #166A45;
  --color-header-active-bg: #104631;

  /* Footer (confirmed from component-footer.css) */
  --color-footer-bg:        #074D31;
  --color-footer-text:      #FFFFFF;
  --color-footer-muted:     #9DA4AE;
  --color-footer-body:      #384250;

  /* Breadcrumb (confirmed from component-breadcrumb.css) */
  --color-breadcrumb-bg:    #F9FAFB;
  --color-breadcrumb-text:  #384250;
  --color-breadcrumb-icon:  #9DA4AE;
  --color-breadcrumb-active:#074D31;

/* =============================================================
   TYPOGRAPHY - IBM Plex Sans Arabic
   (confirmed from foundations-typography.css)
   ============================================================= */

  --font-family-base: 'IBM Plex Sans Arabic', sans-serif;

  /* Size scale */
  --font-size-xs:   10px;
  --font-size-sm:   12px;
  --font-size-md:   14px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;
  --font-size-5xl:  48px;
  --font-size-6xl:  60px;
  --font-size-7xl:  72px;

  /* Weight */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights (matched to size scale) */
  --line-height-xs:   14px;
  --line-height-sm:   18px;
  --line-height-md:   20px;
  --line-height-base: 24px;
  --line-height-lg:   28px;
  --line-height-xl:   30px;
  --line-height-2xl:  32px;
  --line-height-3xl:  38px;
  --line-height-4xl:  44px;
  --line-height-5xl:  60px;
  --line-height-6xl:  72px;
  --line-height-7xl:  90px;

/* =============================================================
   SPACING - 4px base grid
   (confirmed from foundations-spacing.css gap values)
   ============================================================= */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

/* =============================================================
   BORDER RADIUS
   (confirmed from foundations-spacing.css)
   ============================================================= */

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

/* =============================================================
   SHADOWS / ELEVATION
   ============================================================= */

  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.10), 0px 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);

/* =============================================================
   LAYOUT / GRID
   ============================================================= */

  --grid-max-width:       1440px;
  --grid-content-width:   1152px;
  --grid-columns:         12;
  --grid-gutter:          32px;
  --grid-margin-desktop:  80px;
  --grid-margin-tablet:   32px;
  --grid-margin-mobile:   16px;

  --height-header:        80px;
  --height-breadcrumb:    48px;

  /* Breakpoints reference (use in media queries, not as vars) */
  /* mobile:  max-width 767px  */
  /* tablet:  768px - 1199px   */
  /* desktop: min-width 1200px */

}

/* =============================================================
   BASE RESETS
   ============================================================= */

/* THIN-OVERLAY MODE: base resets removed for Kafalah-prod redeploy 2026-05-22.
   When this file was originally generated (UAT, from-scratch DGA site), it
   reset html { direction: rtl; font-size: 16px; ... } which is correct for a
   DGA-only page. But on the Kafalah prod overlay, those rules forced
   direction:rtl onto EN pages (breaking <html lang="en" dir="ltr">) and
   reset typography globally - homepage layout collapsed.
   The :root variables above remain available for use by dga-prod-theme.css
   and any element that opts in via .dga-page / .dga-* utility classes. */

/* =============================================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================================= */

.dga-display-xl { font-size: var(--font-size-7xl); line-height: var(--line-height-7xl); font-weight: var(--font-weight-semibold); }
.dga-display-lg { font-size: var(--font-size-6xl); line-height: var(--line-height-6xl); font-weight: var(--font-weight-semibold); }
.dga-h1         { font-size: var(--font-size-5xl); line-height: var(--line-height-5xl); font-weight: var(--font-weight-semibold); }
.dga-h2         { font-size: var(--font-size-4xl); line-height: var(--line-height-4xl); font-weight: var(--font-weight-semibold); }
.dga-h3         { font-size: var(--font-size-3xl); line-height: var(--line-height-3xl); font-weight: var(--font-weight-semibold); }
.dga-h4         { font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); font-weight: var(--font-weight-semibold); }
.dga-h5         { font-size: var(--font-size-xl);  line-height: var(--line-height-xl);  font-weight: var(--font-weight-semibold); }
.dga-body-lg    { font-size: var(--font-size-lg);  line-height: var(--line-height-lg);  font-weight: var(--font-weight-regular); }
.dga-body-md    { font-size: var(--font-size-base);line-height: var(--line-height-base);font-weight: var(--font-weight-regular); }
.dga-body-sm    { font-size: var(--font-size-md);  line-height: var(--line-height-md);  font-weight: var(--font-weight-regular); }
.dga-caption    { font-size: var(--font-size-sm);  line-height: var(--line-height-sm);  font-weight: var(--font-weight-regular); }