/**
 * Tokens
 */

/**
 * Utility classes 
 */
@theme {
  /** Minimum inset from the viewport edge for floating surfaces. */
  --spacing-screen-border: 2rem;

  --spacing-popover-default-width: 20rem;
  --spacing-popover-min-width: 16rem;

  --spacing-document-max-width: 50rem;
  --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));

  --spacing-card-default-width: 20rem;
  --spacing-card-min-width: 18rem;
  --spacing-card-max-width: 22rem;
  --spacing-card-min-height: 18rem;
  --spacing-card-max-height: 30rem;

  --spacing-tag-padding-block: 0.125rem;

  --spacing-trim-xs: 0.25rem;
  --spacing-trim-sm: 0.5rem;
  --spacing-trim-md: 0.75rem;
  --spacing-trim-lg: 1.5rem;

  /** Minimal trim to allow for ring/outline. */
  --spacing-form-chrome: var(--spacing-trim-xs);
  --spacing-form-gap: var(--spacing-trim-sm);
  --spacing-form-section-gap: var(--spacing-trim-lg);

  /**
   * Density: md (default).
   */
  --spacing-form-padding: var(--spacing-trim-sm);
  --spacing-icon-button-padding: var(--spacing-trim-xs);
  --spacing-scroll-padding: 4px;
}

@layer dx-tokens {
  /**
   * Density: lg — large touch targets (~40px controls).
   */
  .dx-density-lg {
    --spacing-form-padding: var(--spacing-trim-md);
    --spacing-icon-button-padding: var(--spacing-trim-sm);
    --spacing-scroll-padding: 8px;
  }

  /**
   * Density: sm — compact (~28px controls).
   */
  .dx-density-sm {
    --spacing-form-padding: var(--spacing-trim-xs);
    --spacing-icon-button-padding: var(--spacing-trim-xs);
    --spacing-scroll-padding: 2px;
  }

  /**
   * Density: xs — ultra-compact (~24px controls).
   */
  .dx-density-xs {
    --spacing-form-padding: var(--spacing-trim-xs);
    --spacing-icon-button-padding: var(--spacing-trim-xs);
    --spacing-scroll-padding: 2px;
  }
}

/**
 * CSS variables.
 */
@layer dx-tokens {
  :root {
    --dx-line-0: 0px;
    --dx-line-1: 1px;
    --dx-line-2: 2px;

    --dx-lacuna-12: 1.5rem;
    --dx-lacuna-3: 0.375rem;
    --dx-lacuna-4: 0.5rem;
    --dx-lacuna-6: 0.75rem;

    --dx-gutter-xs: 0.25rem; /* Input rings */
    --dx-gutter-sm: 1rem; /* 16px (sm density card) */
    --dx-gutter-md: 2rem; /* 32px (md density card — default) */
    --dx-gutter-lg: 2.5rem; /* 40px (dialog, lg density card) */
  }

  :root {
    --dx-hair-line: 1px;
    --dx-landmark-line: 1px;
    --dx-modal-line: 1px;
    --dx-no-line: 0px;
    --dx-thick-line: 2px;
    --dx-focus-line: 2px;

    --dx-no-line: var(--dx-line-0);
    --dx-hair-line: var(--dx-line-1);
    --dx-thick-line: var(--dx-line-2);

    --dx-focus-offset: var(--dx-no-line);
    --dx-focus-line: var(--dx-thick-line);
    --dx-modal-line: var(--dx-hair-line);
    --dx-grid-focus-indicator-width: var(--dx-hair-line);

    --dx-input-md: var(--dx-lacuna-3);
    --dx-input-lg: var(--dx-lacuna-4);
    --dx-input-sm: var(--dx-lacuna-3);

    --dx-default-icons-size: 1rem; /* size=4 */
  }

  [data-grid-focus-indicator-variant='stack'] {
    --dx-grid-focus-indicator-width: var(--dx-thick-line);
  }

  :root {
    --dx-rail-content: 3rem;
    /** TODO(burdon): Audit. */
    /** TODO(burdon): Density (2 sizes). */
    --dx-rail-size: calc(var(--dx-rail-content) + 1px);
    --dx-rail-item: calc(var(--dx-rail-content) - 1rem);
    /* TODO(burdon): Added 1px for border. */
    /* TODO(burdon): Remove direct usage. */
    --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem);

    --dx-topbar-size: var(--dx-rail-size); /* 50px */
    --dx-toolbar-size: var(--dx-rail-action); /* 40px */
    --dx-statusbar-size: var(--dx-rail-item); /* 32px */

    /** NOTE: Sidebar optimized to show plank + companion with sidebar open on 16" MBP. */
    --dx-nav-sidebar-size: 350px;
    --dx-complementary-sidebar-size: 25rem;
    --dx-drawer-size: 50dvh;

    --dx-l0-size: 72px;
    --dx-l0-avatar-size: 3rem;
    --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
    --dx-r0-size: var(--dx-rail-size);
    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size) - 1px);
  }

  :root {
    --dx-calc-auto: auto;
    --dx-calc-min: min-content;
    --dx-calc-fit: fit-content;
    --dx-calc-max: max-content;
    --dx-calc-content: content;
  }

  @supports (block-size: calc-size(fit-content, size)) {
    :root {
      --dx-calc-auto: calc-size(auto, size);
      --dx-calc-min: calc-size(min-content, size);
      --dx-calc-fit: calc-size(fit-content, size);
      --dx-calc-max: calc-size(max-content, size);
      --dx-calc-content: calc-size(content, size);
    }
  }
}