/**
 * DGA primitives - spacing, radius, typography (mode-invariant).
 */
:root {
  /* Spacing - 4px grid */
  --dga-spacing-none: 0px;
  --dga-spacing-xxs: 2px;
  --dga-spacing-xs: 4px;
  --dga-spacing-sm: 6px;
  --dga-spacing-md: 8px;
  --dga-spacing-lg: 12px;
  --dga-spacing-xl: 16px;
  --dga-spacing-2xl: 20px;
  --dga-spacing-3xl: 24px;
  --dga-spacing-4xl: 32px;
  --dga-spacing-5xl: 40px;
  --dga-spacing-6xl: 48px;
  --dga-spacing-7xl: 64px;
  --dga-spacing-8xl: 80px;
  --dga-spacing-9xl: 96px;
  --dga-spacing-10xl: 128px;
  --dga-spacing-11xl: 160px;

  /* Layout spacing - numeric aliases from Platforms Code (page chrome / viewports) */
  --dga-spacing-48: 192px;
  --dga-spacing-56: 224px;
  --dga-spacing-64: 256px;
  --dga-spacing-80: 320px;
  --dga-spacing-96: 384px;
  --dga-spacing-120: 480px;
  --dga-spacing-140: 560px;
  --dga-spacing-160: 640px;
  --dga-spacing-180: 720px;
  --dga-spacing-192: 768px;
  --dga-spacing-256: 1024px;
  --dga-spacing-320: 1280px;
  --dga-spacing-360: 1440px;
  --dga-spacing-400: 1600px;
  --dga-spacing-480: 1920px;

  /* Radius */
  --dga-radius-none: 0;
  --dga-radius-xs: 2px;
  --dga-radius-sm: 4px;
  --dga-radius-md: 8px;
  --dga-radius-lg: 16px;
  --dga-radius-xl: 24px;
  --dga-radius-full: 9999px;

  /*
   * Breakpoints - Platforms Code layout guideline
   * Small 0–599 → 600 | Medium 600–959 → 960 | Large 960–1279 → 1280 | XLarge 1280+
   */
  --dga-breakpoint-sm: 600px;
  --dga-breakpoint-md: 960px;
  --dga-breakpoint-lg: 1280px;
  --dga-breakpoint-xl: 1440px;

  /* Layout sizes (portal templates) */
  --dga-size-hero-portal: 491px;
  --dga-size-hero-sub: 220px;
  --dga-size-header-portal: 72px;
  --dga-size-header-logo: 58px;
  --dga-size-topbar: 40px;
  --dga-size-icon-badge: 40px;
  --dga-size-dot: 16px;

  /* Icon sizes - Platforms Code iconography ladder */
  --dga-size-icon-2xs: 10px;
  --dga-size-icon-xs: 14px;
  --dga-size-icon-sm: 16px;
  --dga-size-icon-md: 18px;
  --dga-size-icon-lg: 20px;
  --dga-size-icon-xl: 24px;
  --dga-size-icon-2xl: 28px;
  --dga-size-icon-3xl: 32px;

  /* ── Stacking scale ───────────────────────────────────────────────
   * Single source of truth. Prefer Tailwind: z-sticky / z-nav / z-header /
   * z-dropdown / z-popover / z-overlay / z-dialog / z-toast / z-urgent / z-skip
   * or CSS vars: var(--z-index-*). Never invent ad-hoc z-[N] for overlays.
   *
   *  local     1     in-component (active slide, tip trigger)
   *  sticky   30     in-page sticky / nav-rail
   *  nav     200     fixed side rails (gallery aside)
   *  banner  220     sticky announcement
   *  header  230     sticky header shell (below floating UI)
   *  dropdown 300    menus, selects, chrome pickers, date picker, tooltips
   *  popover  305    header login / notifications / user panels
   *  overlay  310    modal / drawer / image-popup backdrops
   *  dialog   315    modal / drawer panel content
   *  toast    320    toasts + FAB stack
   *  urgent   400    a11y / cookies / chatbot fullscreen layers
   *  skip   10000    skip link (always top)
   */
  --dga-z-local: 1;
  --dga-z-sticky: 30;
  --dga-z-nav: 200;
  --dga-z-banner: 220;
  --dga-z-header: 230;
  --dga-z-dropdown: 300;
  --dga-z-popover: 305;
  --dga-z-overlay: 310;
  --dga-z-dialog: 315;
  --dga-z-toast: 320;
  --dga-z-urgent: 400;
  --dga-z-skip: 10000;

  /* Shared floating action stack (a11y / scroll-top / chatbot) */
  --dga-fab-size: 3.5rem;
  --dga-fab-gap: 0.75rem;
  --dga-fab-edge: 2rem;
  --dga-fab-stack-step: calc(var(--dga-fab-size) + var(--dga-fab-gap));

  /* Optional a11y font scale - consumers multiply; defaults to 1 */
  /* --dga-font-scale: 1; */

  /* Static display type */
  --dga-font-display-2xl: calc(72px * var(--dga-font-scale, 1));
  --dga-leading-display-2xl: calc(90px * var(--dga-font-scale, 1));
  --dga-font-display-xl: calc(60px * var(--dga-font-scale, 1));
  --dga-leading-display-xl: calc(72px * var(--dga-font-scale, 1));
  --dga-font-display-lg: calc(48px * var(--dga-font-scale, 1));
  --dga-leading-display-lg: calc(60px * var(--dga-font-scale, 1));
  --dga-font-display-md: calc(36px * var(--dga-font-scale, 1));
  --dga-leading-display-md: calc(44px * var(--dga-font-scale, 1));
  --dga-font-display-sm: calc(30px * var(--dga-font-scale, 1));
  --dga-leading-display-sm: calc(38px * var(--dga-font-scale, 1));
  --dga-font-display-xs: calc(24px * var(--dga-font-scale, 1));
  --dga-leading-display-xs: calc(32px * var(--dga-font-scale, 1));

  /* Static text type */
  --dga-font-text-xl: calc(20px * var(--dga-font-scale, 1));
  --dga-leading-text-xl: calc(30px * var(--dga-font-scale, 1));
  --dga-font-text-lg: calc(18px * var(--dga-font-scale, 1));
  --dga-leading-text-lg: calc(28px * var(--dga-font-scale, 1));
  --dga-font-text-md: calc(16px * var(--dga-font-scale, 1));
  --dga-leading-text-md: calc(24px * var(--dga-font-scale, 1));
  --dga-font-text-sm: calc(14px * var(--dga-font-scale, 1));
  --dga-leading-text-sm: calc(20px * var(--dga-font-scale, 1));
  --dga-font-text-xs: calc(12px * var(--dga-font-scale, 1));
  --dga-leading-text-xs: calc(18px * var(--dga-font-scale, 1));
  --dga-font-text-2xs: calc(10px * var(--dga-font-scale, 1));
  --dga-leading-text-2xs: calc(14px * var(--dga-font-scale, 1));

  /* Layout */
  --dga-content-max-width: 1280px;
  --dga-viewport-base-padding: 32px;
  --dga-viewport-padding: var(--dga-viewport-base-padding);
  /*
   * Portal content shell:
   * padding-inline: max(viewport-padding, (100% - 1280px) / 2)
   * Do NOT combine with max-width + large inner padding (that double-shrinks content).
   */
  --dga-wrapper-padding: max(
    var(--dga-viewport-padding),
    calc((100% - var(--dga-content-max-width)) / 2)
  );
  --dga-paragraph-max-width: var(--dga-spacing-180);

  /* Font family */
  --dga-font-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
}

@media (max-width: 639px) {
  :root {
    --dga-fab-edge: 1.5rem;
    --dga-fab-size: 3rem;
    --dga-fab-stack-step: calc(var(--dga-fab-size) + var(--dga-fab-gap));
  }
}