/* ==========================================================================
   DGA Design System - Design Tokens
   Extracted from ng-dga-main codebase
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Faces
   -------------------------------------------------------------------------- */

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

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

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

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

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */

:root {
  /* ---- Color Primitives ---- */

  /* Primary (Saudi Green) */
  --dga-primary-25: #F7FDF9;
  --dga-primary-50: #F3FCF6;
  --dga-primary-100: #DFF6E7;
  --dga-primary-200: #B8EACB;
  --dga-primary-300: #88D8AD;
  --dga-primary-400: #54C08A;
  --dga-primary-500: #25935F;
  --dga-primary-600: #1B8354;
  --dga-primary-700: #166A45;
  --dga-primary-800: #14573A;
  --dga-primary-900: #104631;
  --dga-primary-950: #092A1E;

  /* Secondary (Gold) */
  --dga-secondary-25: #FFFEF7;
  --dga-secondary-50: #FFFEF2;
  --dga-secondary-100: #FFFCE6;
  --dga-secondary-200: #FCF3BD;
  --dga-secondary-300: #FAE996;
  --dga-secondary-400: #F7D54D;
  --dga-secondary-500: #F5BD02;
  --dga-secondary-600: #DBA102;
  --dga-secondary-700: #B87B02;
  --dga-secondary-800: #945C01;
  --dga-secondary-900: #6E3C00;
  --dga-secondary-950: #472400;

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

  /* Error */
  --dga-error-25: #FFFBFA;
  --dga-error-50: #FEF3F2;
  --dga-error-100: #FEE4E2;
  --dga-error-200: #FECDCA;
  --dga-error-300: #FDA29B;
  --dga-error-400: #F97066;
  --dga-error-500: #F04438;
  --dga-error-600: #D92D20;
  --dga-error-700: #B42318;

  /* Success */
  --dga-success-500: #17B26A;
  --dga-success-600: #079455;

  /* Warning */
  --dga-warning-500: #F79009;

  /* Info */
  --dga-info-500: #2E90FA;

  /* Base */
  --dga-white: #FFFFFF;
  --dga-black: #161616;

  /* ---- Semantic Color Aliases ---- */
  --color-bg-body: var(--dga-neutral-50);
  --color-bg-surface: var(--dga-white);
  --color-bg-neutral-100: var(--dga-neutral-100);
  --color-bg-neutral-200: var(--dga-neutral-200);
  --color-bg-primary-50: var(--dga-primary-50);

  --color-text-default: var(--dga-black);
  --color-text-display: var(--dga-neutral-800);
  --color-text-secondary: var(--dga-neutral-700);
  --color-text-muted: var(--dga-neutral-500);
  --color-text-primary: var(--dga-primary-600);
  --color-text-on-primary: var(--dga-white);
  --color-text-dark: #1C242F;

  --color-border-default: var(--dga-neutral-400);
  --color-border-neutral: var(--dga-neutral-300);
  --color-border-focus: var(--dga-black);

  --color-btn-primary-bg: var(--dga-primary-600);
  --color-btn-primary-hover: var(--dga-primary-700);
  --color-btn-neutral-bg: var(--dga-neutral-100);
  --color-btn-neutral-hover: var(--dga-neutral-200);

  /* ---- Typography ---- */
  --font-family-text: 'IBM Plex Sans Arabic', sans-serif;
  --font-family-display: 'IBM Plex Sans Arabic', sans-serif;

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

  /* Display Sizes */
  --display-md-size: 2.25rem;     /* 36px */
  --display-md-line: 2.75rem;     /* 44px */
  --display-sm-size: 1.875rem;    /* 30px */
  --display-sm-line: 2.375rem;    /* 38px */

  /* Text Sizes */
  --text-xl-size: 1.25rem;        /* 20px */
  --text-xl-line: 1.875rem;       /* 30px */
  --text-lg-size: 1.125rem;       /* 18px */
  --text-lg-line: 1.75rem;        /* 28px */
  --text-md-size: 1rem;           /* 16px */
  --text-md-line: 1.5rem;         /* 24px */
  --text-sm-size: 0.875rem;       /* 14px */
  --text-sm-line: 1.25rem;        /* 20px */
  --text-xs-size: 0.75rem;        /* 12px */
  --text-xs-line: 1.125rem;       /* 18px */

  /* ---- Spacing ---- */
  --spacing-none: 0;
  --spacing-xxs: 0.125rem;   /* 2px */
  --spacing-xs: 0.25rem;     /* 4px */
  --spacing-sm: 0.375rem;    /* 6px */
  --spacing-md: 0.5rem;      /* 8px */
  --spacing-lg: 0.75rem;     /* 12px */
  --spacing-xl: 1rem;        /* 16px */
  --spacing-2xl: 1.25rem;    /* 20px */
  --spacing-3xl: 1.5rem;     /* 24px */
  --spacing-4xl: 2rem;       /* 32px */
  --spacing-5xl: 2.5rem;     /* 40px */
  --spacing-6xl: 3rem;       /* 48px */

  /* ---- Border Radius ---- */
  --radius-none: 0;
  --radius-xs: 0.125rem;     /* 2px */
  --radius-sm: 0.25rem;      /* 4px */
  --radius-md: 0.5rem;       /* 8px */
  --radius-lg: 1rem;         /* 16px */
  --radius-xl: 1.5rem;       /* 24px */
  --radius-full: 9999px;

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

  /* ---- Layout ---- */
  --container-max-width: 80rem;       /* 1280px */
  --container-padding-desktop: 2rem;  /* 32px */
  --container-padding-mobile: 1rem;   /* 16px */

  /* ---- Controls ---- */
  --control-height-lg: 3rem;      /* 48px - DGA standard input height */
  --control-height-md: 2.5rem;    /* 40px */
  --control-height-sm: 2rem;      /* 32px */

  /* ---- Focus ---- */
  --focus-outline-width: 2px;
  --focus-outline-offset: 1px;
  --focus-outline-color: var(--dga-black);
  --min-touch-target: 44px;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}