/* ============================================================
   IDM Design System — Tokens
   ZDataCloud App4 Upgrade
   ============================================================
   CSS Custom Properties only — no selectors, no side effects.
   Loaded on all pages via head.blade.php and head_survey.blade.php
   ============================================================ */

:root {
  /* === Core IDM Brand Colors === */
  --idm-primary: #0474bb;
  --idm-accent: #fbc34c;
  --idm-secondary: #096ba4;
  --idm-supporting: #4c90ad;
  --idm-soft-blue: #acbcda;
  --idm-dark-neutral: #483e40;
  --idm-white: #ffffff;

  /* === Semantic Colors === */
  --color-bg-page: #f7f9fc;
  --color-bg-surface: #ffffff;
  --color-bg-alt: #eef3f8;
  --color-text-primary: #483e40;
  --color-text-secondary: #5a6b7a;
  --color-text-inverse: #ffffff;
  --color-text-link: #0474bb;
  --color-text-link-hover: #096ba4;
  --color-border: #d6dee6;
  --color-border-focus: #0474bb;
  --color-success: #2e8b57;
  --color-success-bg: #e6f5ec;
  --color-success-border: #b8e0c5;
  --color-warning: #c77f00;
  --color-warning-bg: #fff5e0;
  --color-warning-border: #f0d090;
  --color-danger: #c0392b;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f0c0bc;
  --color-info: #096ba4;
  --color-info-bg: #e8f1f7;
  --color-info-border: #b8d0e0;
  --color-disabled-bg: #f0f3f6;
  --color-disabled-text: #9aa5af;

  /* === Typography Scale === */
  --text-display: 2.0rem;
  --text-h1: 1.75rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-h4: 1.125rem;
  --text-body: 1.0rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-overline: 0.75rem;

  /* === Font Families === */
  --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* === Font Weights === */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === Line Heights === */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;

  /* === Spacing Scale (8-point base) === */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* === Border Radius === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 9999px;
  --radius-none: 0;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(72, 62, 64, 0.06);
  --shadow-sm: 0 1px 3px rgba(72, 62, 64, 0.08), 0 1px 2px rgba(72, 62, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(72, 62, 64, 0.10), 0 2px 4px rgba(72, 62, 64, 0.06);
  --shadow-lg: 0 8px 24px rgba(72, 62, 64, 0.12), 0 4px 8px rgba(72, 62, 64, 0.08);
  --shadow-focus: 0 0 0 3px rgba(4, 116, 187, 0.25);
  --shadow-focus-danger: 0 0 0 3px rgba(192, 57, 43, 0.20);

  /* === Transitions === */
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 250ms;
  --duration-slower: 400ms;
  --ease-default: ease;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Responsive Breakpoints === */
  --bp-xs: 0;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* === Z-Index Scale === */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-toast: 1060;
}