/*
 * Design Tokens Preview Layer
 * Centralized color, type, spacing, and density tokens.
 * Safe to disable via UI_DESIGN_TOKENS_PREVIEW=false.
 */

:root {
  /* Color tokens */
  --dt-color-brand-50: #ecfdf5;
  --dt-color-brand-100: #d1fae5;
  --dt-color-brand-500: #10b981;
  --dt-color-brand-600: #059669;
  --dt-color-accent-500: #f59e0b;

  --dt-color-surface-0: #ffffff;
  --dt-color-surface-1: #f8fafc;
  --dt-color-surface-dark-0: #0b1326;
  --dt-color-surface-dark-1: #171f33;

  --dt-color-text-strong: #1f2937;
  --dt-color-text-muted: #64748b;
  --dt-color-text-dark-strong: #dae2fd;
  --dt-color-text-dark-muted: #b9c6dd;

  /* Typography tokens */
  --dt-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dt-font-display: 'Noto Serif', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
  --dt-font-size-xs: 0.75rem;
  --dt-font-size-sm: 0.875rem;
  --dt-font-size-md: 1rem;
  --dt-font-size-lg: 1.125rem;
  --dt-font-size-xl: 1.25rem;

  /* Spacing tokens */
  --dt-space-1: 0.25rem;
  --dt-space-2: 0.5rem;
  --dt-space-3: 0.75rem;
  --dt-space-4: 1rem;
  --dt-space-5: 1.25rem;
  --dt-space-6: 1.5rem;
  --dt-space-8: 2rem;

  /* Density tokens */
  --dt-density-compact-input-height: 2.25rem;
  --dt-density-compact-row-min-height: 2.5rem;
  --dt-density-comfortable-input-height: 2.625rem;
  --dt-density-comfortable-row-min-height: 2.875rem;

  /* Active density profile */
  --dt-density-input-height: var(--dt-density-comfortable-input-height);
  --dt-density-row-min-height: var(--dt-density-comfortable-row-min-height);
}

/* Token application */
.fi-body {
  font-family: var(--dt-font-sans);
  color: var(--dt-color-text-strong);
}

.dark .fi-body {
  color: var(--dt-color-text-dark-strong);
}

.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading {
  font-family: var(--dt-font-display);
}

.fi-section {
  border-radius: var(--dt-space-3);
}

.fi-section-content-ctn,
.fi-section-header,
.fi-section-footer {
  padding-left: var(--dt-space-5);
  padding-right: var(--dt-space-5);
}

.fi-btn,
.fi-icon-btn,
.fi-input,
.fi-select-input,
.fi-fo-textarea textarea {
  min-height: var(--dt-density-input-height);
}

.fi-ta-row,
.fi-ta-record {
  min-height: var(--dt-density-row-min-height);
}

.fi-btn.fi-color-primary,
.dark .fi-btn.fi-color-primary {
  --tw-ring-color: color-mix(in srgb, var(--dt-color-brand-500) 32%, transparent);
}

::selection {
  background: color-mix(in srgb, var(--dt-color-brand-500) 26%, transparent);
}