/**
 * Tailwind v4 theme bridge - maps DGA tokens to utility classes.
 *
 * Examples:
 *   bg-surface / bg-body / bg-primary
 *   text-display / text-paragraph / text-muted
 *   border-neutral / p-md / rounded-md
 *   max-w-(--container-5xl) for layout (plain max-w-5xl maps to spacing)
 *   text-display-md / text-body-sm
 */
@theme {
  --font-sans: var(--dga-font-sans);

  /* Spacing scale → p-md, gap-xl, etc. */
  --spacing-none: var(--dga-spacing-none);
  --spacing-xxs: var(--dga-spacing-xxs);
  --spacing-xs: var(--dga-spacing-xs);
  --spacing-sm: var(--dga-spacing-sm);
  --spacing-md: var(--dga-spacing-md);
  --spacing-lg: var(--dga-spacing-lg);
  --spacing-xl: var(--dga-spacing-xl);
  --spacing-2xl: var(--dga-spacing-2xl);
  --spacing-3xl: var(--dga-spacing-3xl);
  --spacing-4xl: var(--dga-spacing-4xl);
  --spacing-5xl: var(--dga-spacing-5xl);
  --spacing-6xl: var(--dga-spacing-6xl);
  --spacing-7xl: var(--dga-spacing-7xl);
  --spacing-8xl: var(--dga-spacing-8xl);
  --spacing-9xl: var(--dga-spacing-9xl);
  --spacing-10xl: var(--dga-spacing-10xl);
  --spacing-11xl: var(--dga-spacing-11xl);

  /* Large layout spacing → p-48, gap-180, max-w-(--spacing-320), … */
  --spacing-48: var(--dga-spacing-48);
  --spacing-56: var(--dga-spacing-56);
  --spacing-64: var(--dga-spacing-64);
  --spacing-80: var(--dga-spacing-80);
  --spacing-96: var(--dga-spacing-96);
  --spacing-120: var(--dga-spacing-120);
  --spacing-140: var(--dga-spacing-140);
  --spacing-160: var(--dga-spacing-160);
  --spacing-180: var(--dga-spacing-180);
  --spacing-192: var(--dga-spacing-192);
  --spacing-256: var(--dga-spacing-256);
  --spacing-320: var(--dga-spacing-320);
  --spacing-360: var(--dga-spacing-360);
  --spacing-400: var(--dga-spacing-400);
  --spacing-480: var(--dga-spacing-480);

  /*
   * Platforms Code breakpoints → sm:/md:/lg:/xl:
   * Use literal lengths here - Tailwind inlines these into @media queries,
   * and `var()` inside @media is unreliable across browsers.
   * Keep --dga-breakpoint-* in primitives.css as the documented source of truth.
   */
  --breakpoint-sm: 600px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1440px;

  /*
   * Container widths for layout.
   * Prefer `max-w-(--container-5xl)` - plain `max-w-5xl` binds to --spacing-5xl in TW v4.
   */
  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  /* Portal content column (1280px) */
  --container-7xl: var(--dga-content-max-width);

  /* Content-wrapper padding → px-(--wrapper-padding) */
  --content-max-width: var(--dga-content-max-width);
  --viewport-padding: var(--dga-viewport-padding);
  --wrapper-padding: var(--dga-wrapper-padding);

  /* Radius → rounded-md */
  --radius-none: var(--dga-radius-none);
  --radius-xs: var(--dga-radius-xs);
  --radius-sm: var(--dga-radius-sm);
  --radius-md: var(--dga-radius-md);
  --radius-lg: var(--dga-radius-lg);
  --radius-xl: var(--dga-radius-xl);
  --radius-full: var(--dga-radius-full);

  /* Fixed layout sizes → min-h-(--size-hero-portal), size-(--size-dot), … */
  --size-hero-portal: var(--dga-size-hero-portal);
  --size-hero-sub: var(--dga-size-hero-sub);
  --size-header-portal: var(--dga-size-header-portal);
  --size-header-logo: var(--dga-size-header-logo);
  --size-topbar: var(--dga-size-topbar);
  --size-icon-badge: var(--dga-size-icon-badge);
  --size-dot: var(--dga-size-dot);

  /* Icon sizes → size-(--size-icon-sm), w-(--size-icon-xl), … */
  --size-icon-2xs: var(--dga-size-icon-2xs);
  --size-icon-xs: var(--dga-size-icon-xs);
  --size-icon-sm: var(--dga-size-icon-sm);
  --size-icon-md: var(--dga-size-icon-md);
  --size-icon-lg: var(--dga-size-icon-lg);
  --size-icon-xl: var(--dga-size-icon-xl);
  --size-icon-2xl: var(--dga-size-icon-2xl);
  --size-icon-3xl: var(--dga-size-icon-3xl);

  /* Semantic colors → bg-*, text-*, border-* */
  --color-surface: var(--dga-bg-surface, var(--dga-bg-default));
  --color-body: var(--dga-bg-body);
  --color-nav: var(--dga-bg-nav);
  --color-topbar: var(--dga-bg-topbar);
  --color-card: var(--dga-bg-card);
  --color-card-hovered: var(--dga-bg-card-hovered);
  --color-elevated: var(--dga-bg-elevated);
  --color-sunken: var(--dga-bg-sunken);
  --color-overlay: var(--dga-bg-overlay);
  --color-mark: var(--dga-bg-mark);

  --color-primary: var(--dga-bg-primary);
  --color-primary-light: var(--dga-bg-primary-light);
  --color-primary-faint: var(--dga-bg-primary-faint);
  --color-primary-strong: var(--dga-bg-primary-strong);
  --color-footer: var(--dga-bg-footer);
  --color-border-on-color: var(--dga-border-on-color);
  --color-secondary: var(--dga-bg-secondary);
  --color-tertiary: var(--dga-bg-tertiary);
  --color-neutral-light: var(--dga-bg-neutral-light);

  --color-success: var(--dga-bg-success);
  --color-success-light: var(--dga-bg-success-light);
  --color-success-faint: var(--dga-bg-success-faint);
  --color-info: var(--dga-bg-info);
  --color-info-light: var(--dga-bg-info-light);
  --color-info-faint: var(--dga-bg-info-faint);
  --color-warning: var(--dga-bg-warning);
  --color-warning-light: var(--dga-bg-warning-light);
  --color-warning-faint: var(--dga-bg-warning-faint);
  --color-error: var(--dga-bg-error);
  --color-error-light: var(--dga-bg-error-light);
  --color-error-faint: var(--dga-bg-error-faint);
  --color-disabled: var(--dga-bg-disabled);

  --color-fg: var(--dga-text-default);
  --color-display: var(--dga-text-display);
  --color-paragraph: var(--dga-text-paragraph);
  --color-muted: var(--dga-text-muted);
  --color-fg-primary: var(--dga-text-primary);
  --color-fg-primary-strong: var(--dga-text-primary-strong);
  --color-fg-secondary: var(--dga-text-secondary);
  --color-fg-tertiary: var(--dga-text-tertiary);
  --color-on-color: var(--dga-text-on-color);
  --color-on-color-muted: var(--dga-text-on-color-muted);
  --color-fg-success: var(--dga-text-success);
  --color-fg-info: var(--dga-text-info);
  --color-fg-warning: var(--dga-text-warning);
  --color-fg-error: var(--dga-text-error);
  --color-fg-disabled: var(--dga-text-disabled);

  --color-border: var(--dga-border-neutral);
  --color-border-subtle: var(--dga-border-neutral-subtle);
  --color-border-faint: var(--dga-border-neutral-faint);
  --color-border-primary: var(--dga-border-primary);
  --color-border-primary-light: var(--dga-border-primary-light);
  --color-border-success: var(--dga-border-success);
  --color-border-info: var(--dga-border-info);
  --color-border-warning: var(--dga-border-warning);
  --color-border-error: var(--dga-border-error);
  --color-border-disabled: var(--dga-border-disabled);
  --color-divider: var(--dga-divider);

  --color-focus: var(--dga-focus-ring);
  --color-focus-inner: var(--dga-focus-inner);

  /* Stacking → z-sticky / z-nav / z-header / z-dropdown / z-popover /
   * z-overlay / z-dialog / z-toast / z-urgent / z-skip */
  --z-index-local: var(--dga-z-local);
  --z-index-sticky: var(--dga-z-sticky);
  --z-index-nav: var(--dga-z-nav);
  --z-index-banner: var(--dga-z-banner);
  --z-index-header: var(--dga-z-header);
  --z-index-dropdown: var(--dga-z-dropdown);
  --z-index-popover: var(--dga-z-popover);
  --z-index-overlay: var(--dga-z-overlay);
  --z-index-dialog: var(--dga-z-dialog);
  --z-index-toast: var(--dga-z-toast);
  --z-index-urgent: var(--dga-z-urgent);
  --z-index-skip: var(--dga-z-skip);

  --shadow-xs: var(--dga-shadow-xs);
  --shadow-sm: var(--dga-shadow-sm);
  --shadow-md: var(--dga-shadow-md);
  --shadow-lg: var(--dga-shadow-lg);
  --shadow-xl: var(--dga-shadow-xl);
  --shadow-2xl: var(--dga-shadow-2xl);
  --shadow-3xl: var(--dga-shadow-3xl);

  /* Type sizes → text-display-md, text-body-sm (custom utilities below) */
  --text-display-2xl: var(--dga-font-display-2xl);
  --text-display-2xl--line-height: var(--dga-leading-display-2xl);
  --text-display-xl: var(--dga-font-display-xl);
  --text-display-xl--line-height: var(--dga-leading-display-xl);
  --text-display-lg: var(--dga-font-display-lg);
  --text-display-lg--line-height: var(--dga-leading-display-lg);
  --text-display-md: var(--dga-font-display-md);
  --text-display-md--line-height: var(--dga-leading-display-md);
  --text-display-sm: var(--dga-font-display-sm);
  --text-display-sm--line-height: var(--dga-leading-display-sm);
  --text-display-xs: var(--dga-font-display-xs);
  --text-display-xs--line-height: var(--dga-leading-display-xs);

  --text-body-xl: var(--dga-font-text-xl);
  --text-body-xl--line-height: var(--dga-leading-text-xl);
  --text-body-lg: var(--dga-font-text-lg);
  --text-body-lg--line-height: var(--dga-leading-text-lg);
  --text-body-md: var(--dga-font-text-md);
  --text-body-md--line-height: var(--dga-leading-text-md);
  --text-body-sm: var(--dga-font-text-sm);
  --text-body-sm--line-height: var(--dga-leading-text-sm);
  --text-body-xs: var(--dga-font-text-xs);
  --text-body-xs--line-height: var(--dga-leading-text-xs);
  --text-body-2xs: var(--dga-font-text-2xs);
  --text-body-2xs--line-height: var(--dga-leading-text-2xs);
}