/**
 * DGA Design System - Design Tokens
 *
 * This file contains all design tokens (CSS custom properties) that define
 * the visual foundation of the DGA design system for Drupal integration.
 */

:root {
  /* Colors - Text */
  --text-default: #161616;
  --text-display: #1f2a37;
  --text-primary-sa-flag: #14573a;
  --text-oncolor-primary: #ffffff;
  --text-secondary-paragraph: #6b7280;
  --text-disabled: #9ca3af;
  --text-error: #dc2626;
  --text-warning: #d97706;
  --text-success: #067647;
  --text-info: #0ea5e9;

  /* Colors - Background */
  --background-white: #ffffff;
  --background-card: #ffffff;
  --background-menu: #ffffff;
  --background-neutral-50: #f9fafb;
  --background-neutral-100: #f3f4f6;
  --background-neutral-200: #e5e7eb;
  --background-neutral-300: #d1d5db;
  --background-neutral-400: #9ca3af;
  --background-neutral-500: #6b7280;
  --background-neutral-600: #4b5563;
  --background-neutral-700: #374151;
  --background-neutral-800: #1f2937;
  --background-neutral-900: #111827;

  /* Colors - Primary */
  --background-primary: #14573a;
  --background-primary-50: #f0f9f4;
  --background-primary-100: #dcf4e6;
  --background-primary-200: #bbe7d1;
  --background-primary-300: #86d5b0;
  --background-primary-400: #4ade80;
  --background-primary-500: #22c55e;
  --background-primary-600: #16a34a;
  --background-primary-700: #15803d;
  --background-primary-800: #166534;
  --background-primary-900: #14532d;

  /* Colors - Status */
  --background-success: #067647;
  --background-warning: #d97706;
  --background-error: #dc2626;
  --background-info: #0ea5e9;

  /* Colors - Borders */
  --border-neutral-primary: #d2d6db;
  --border-neutral-secondary: #e5e7eb;
  --border-primary: #14573a;
  --border-error: #dc2626;
  --border-warning: #d97706;
  --border-success: #067647;
  --border-info: #0ea5e9;

  /* Colors - Icons */
  --icon-default: #6b7280;
  --icon-primary: #14573a;
  --icon-success: #067647;
  --icon-warning: #d97706;
  --icon-error: #dc2626;
  --icon-info: #0ea5e9;
  --icon-oncolor: #ffffff;

  /* Colors - Links */
  --link-primary: #14573a;
  --link-primary-hover: #0f4028;
  --link-visited: #14573a;

  /* Typography - Font Family */
  --font-family: "IBM Plex Sans Arabic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: "SF Mono", Monaco, "Inconsolata", "Roboto Mono", monospace;

  /* Typography - Letter Spacing */
  --letter-spacing-default: 0.02em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-wide: 0.05em;

  /* Typography - Display Sizes */
  --display-2xl-size: 72px;
  --display-2xl-line-height: 90px;
  --display-2xl-weight-regular: 400;
  --display-2xl-weight-medium: 500;
  --display-2xl-weight-semibold: 600;
  --display-2xl-weight-bold: 700;
  --display-2xl-letter-spacing: 0.02em;

  --display-xl-size: 60px;
  --display-xl-line-height: 72px;
  --display-xl-weight-regular: 400;
  --display-xl-weight-medium: 500;
  --display-xl-weight-semibold: 600;
  --display-xl-weight-bold: 700;
  --display-xl-letter-spacing: 0.02em;

  --display-lg-size: 48px;
  --display-lg-line-height: 60px;
  --display-lg-weight-regular: 400;
  --display-lg-weight-medium: 500;
  --display-lg-weight-semibold: 600;
  --display-lg-weight-bold: 700;
  --display-lg-letter-spacing: 0.02em;

  --display-md-size: 36px;
  --display-md-line-height: 44px;
  --display-md-weight-regular: 400;
  --display-md-weight-medium: 500;
  --display-md-weight-semibold: 600;
  --display-md-weight-bold: 700;
  --display-md-letter-spacing: 0.02em;

  --display-sm-size: 30px;
  --display-sm-line-height: 38px;
  --display-sm-weight-regular: 400;
  --display-sm-weight-medium: 500;
  --display-sm-weight-semibold: 600;
  --display-sm-weight-bold: 700;
  --display-sm-letter-spacing: 0.02em;

  --display-xs-size: 24px;
  --display-xs-line-height: 32px;
  --display-xs-weight-regular: 400;
  --display-xs-weight-medium: 500;
  --display-xs-weight-semibold: 600;
  --display-xs-weight-bold: 700;
  --display-xs-letter-spacing: 0.02em;

  /* Typography - Text Sizes */
  --text-2xl-size: 24px;
  --text-2xl-line-height: 30px;
  --text-2xl-weight-regular: 400;
  --text-2xl-weight-medium: 500;
  --text-2xl-weight-semibold: 600;
  --text-2xl-weight-bold: 700;
  --text-2xl-letter-spacing: 0.02em;

  --text-xl-size: 20px;
  --text-xl-line-height: 30px;
  --text-xl-weight-regular: 400;
  --text-xl-weight-medium: 500;
  --text-xl-weight-semibold: 600;
  --text-xl-weight-bold: 700;
  --text-xl-letter-spacing: 0.02em;

  --text-lg-size: 18px;
  --text-lg-line-height: 28px;
  --text-lg-weight-regular: 400;
  --text-lg-weight-medium: 500;
  --text-lg-weight-semibold: 600;
  --text-lg-weight-bold: 700;
  --text-lg-letter-spacing: 0.02em;

  --text-md-size: 16px;
  --text-md-line-height: 24px;
  --text-md-weight-regular: 400;
  --text-md-weight-medium: 500;
  --text-md-weight-semibold: 600;
  --text-md-weight-bold: 700;
  --text-md-letter-spacing: 0.02em;

  --text-sm-size: 14px;
  --text-sm-line-height: 20px;
  --text-sm-weight-regular: 400;
  --text-sm-weight-medium: 500;
  --text-sm-weight-semibold: 600;
  --text-sm-weight-bold: 700;
  --text-sm-letter-spacing: 0.02em;

  --text-xs-size: 12px;
  --text-xs-line-height: 16px;
  --text-xs-weight-regular: 400;
  --text-xs-weight-medium: 500;
  --text-xs-weight-semibold: 600;
  --text-xs-weight-bold: 700;
  --text-xs-letter-spacing: 0.02em;

  /* Spacing Scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;
  --spacing-7xl: 80px;
  --spacing-8xl: 96px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Box Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Breakpoints (for JavaScript usage) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* Container Widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
  --container-max: 1440px;
}

/**
 * Drupal-specific design token overrides
 * These help integrate DGA tokens with Drupal's existing CSS patterns
 */

/* Override Bootstrap variables with DGA tokens if Bootstrap is still loaded */
.dga-theme {
  /* Bootstrap color mappings */
  --bs-primary: var(--background-primary);
  --bs-secondary: var(--background-neutral-600);
  --bs-success: var(--background-success);
  --bs-danger: var(--background-error);
  --bs-warning: var(--background-warning);
  --bs-info: var(--background-info);
  --bs-light: var(--background-neutral-100);
  --bs-dark: var(--background-neutral-800);

  /* Bootstrap typography mappings */
  --bs-font-family-base: var(--font-family);
  --bs-font-size-base: var(--text-md-size);
  --bs-line-height-base: var(--text-md-line-height);

  /* Bootstrap spacing mappings */
  --bs-spacer: var(--spacing-lg);
  --bs-border-radius: var(--radius-sm);
  --bs-border-color: var(--border-neutral-primary);
}

/**
 * Dark mode support (optional)
 * Uncomment and customize if dark mode is required
 */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --text-default: #f9fafb;
    --text-display: #ffffff;
    --background-card: #1f2937;
    --background-neutral-50: #111827;
    --border-neutral-primary: #374151;
  }
}
*/