/**
 * @file
 * FlowDrop Theme Layer
 *
 * Maps design tokens (--fd-*) to component-specific CSS variables.
 * Themes can override this file to customize components.
 */

:root {
  /* ========================================================================
	   BUTTON COMPONENT TOKENS
	   ======================================================================== */

  --fd-button-primary-bg: var(--fd-primary);
  --fd-button-primary-bg-hover: var(--fd-primary-hover);
  --fd-button-primary-bg-active: var(--fd-primary-hover);
  --fd-button-primary-text: var(--fd-primary-foreground);
  --fd-button-primary-border: transparent;
  --fd-button-secondary-bg: var(--fd-card);
  --fd-button-secondary-bg-hover: var(--fd-secondary-hover);
  --fd-button-secondary-bg-active: var(--fd-secondary-hover);
  --fd-button-secondary-text: var(--fd-secondary-foreground);
  --fd-button-secondary-border: var(--fd-border);
  --fd-button-ghost-bg: transparent;
  --fd-button-ghost-bg-hover: var(--fd-subtle);
  --fd-button-ghost-text: var(--fd-muted-foreground);
  --fd-button-padding-x: var(--fd-space-4);
  --fd-button-padding-y: var(--fd-space-2);
  --fd-button-radius: var(--fd-radius-lg);
  --fd-button-font-size: var(--fd-text-sm);
  --fd-button-font-weight: var(--fd-font-weight-medium);

  /* ========================================================================
	   CARD COMPONENT TOKENS
	   ======================================================================== */

  --fd-card-bg: var(--fd-card);
  --fd-card-border: var(--fd-border);
  --fd-card-radius: var(--fd-radius-xl);
  --fd-card-shadow: var(--fd-shadow-sm);
  --fd-card-padding: var(--fd-space-6);
  --fd-card-hover-shadow: var(--fd-shadow-md);
  --fd-card-hover-border: var(--fd-border-muted);

  /* ========================================================================
	   STAT CARD COMPONENT TOKENS
	   ======================================================================== */

  --fd-stat-card-bg: var(--fd-card);
  --fd-stat-card-border: var(--fd-border);
  --fd-stat-card-radius: var(--fd-radius-xl);
  --fd-stat-card-padding: var(--fd-space-5);
  --fd-stat-card-value-color: var(--fd-foreground);
  --fd-stat-card-value-size: var(--fd-text-2xl);
  --fd-stat-card-value-weight: var(--fd-font-weight-bold);
  --fd-stat-card-label-color: var(--fd-muted-foreground);
  --fd-stat-card-label-size: var(--fd-text-sm);
  --fd-stat-card-label-weight: var(--fd-font-weight-medium);
  --fd-stat-card-icon-bg: var(--fd-accent-muted);
  --fd-stat-card-icon-color: var(--fd-accent);

  /* ========================================================================
	   STATUS BADGE COMPONENT TOKENS
	   ======================================================================== */

  --fd-badge-radius: var(--fd-radius-full);
  --fd-badge-padding-x: var(--fd-space-3);
  --fd-badge-padding-y: var(--fd-space-1);
  --fd-badge-font-size: var(--fd-text-xs);
  --fd-badge-font-weight: var(--fd-font-weight-semibold);
  --fd-badge-text-transform: uppercase;
  --fd-badge-letter-spacing: 0.025em;
  --fd-badge-success-bg: var(--fd-success-muted);
  --fd-badge-success-text: var(--fd-success-hover);
  --fd-badge-success-border: var(--fd-success);
  --fd-badge-warning-bg: var(--fd-warning-muted);
  --fd-badge-warning-text: var(--fd-warning-hover);
  --fd-badge-warning-border: var(--fd-warning);
  --fd-badge-error-bg: var(--fd-error-muted);
  --fd-badge-error-text: var(--fd-error-hover);
  --fd-badge-error-border: var(--fd-error);
  --fd-badge-info-bg: var(--fd-info-muted);
  --fd-badge-info-text: var(--fd-info);
  --fd-badge-info-border: var(--fd-info);
  --fd-badge-neutral-bg: var(--fd-subtle);
  --fd-badge-neutral-text: var(--fd-muted-foreground);
  --fd-badge-neutral-border: var(--fd-border-muted);

  /* ========================================================================
	   PAGE HEADER COMPONENT TOKENS
	   ======================================================================== */

  --fd-header-bg: var(--fd-card);
  --fd-header-border: var(--fd-border);
  --fd-header-shadow: var(--fd-shadow-sm);
  --fd-header-padding-x: var(--fd-space-6);
  --fd-header-padding-y: var(--fd-space-3);
  --fd-header-logo-size: 2.5rem;
  --fd-header-title-color: var(--fd-foreground);
  --fd-header-title-size: var(--fd-text-xl);
  --fd-header-subtitle-color: var(--fd-muted-foreground);
  --fd-header-subtitle-size: var(--fd-text-sm);

  /* ========================================================================
	   BREADCRUMB COMPONENT TOKENS
	   ======================================================================== */

  --fd-breadcrumb-text-color: var(--fd-muted-foreground);
  --fd-breadcrumb-link-color: var(--fd-muted-foreground);
  --fd-breadcrumb-link-hover: var(--fd-primary);
  --fd-breadcrumb-separator-color: var(--fd-border-muted);
  --fd-breadcrumb-current-color: var(--fd-foreground);
  --fd-breadcrumb-font-size: var(--fd-text-sm);

  /* ========================================================================
	   ACTION LINK COMPONENT TOKENS
	   ======================================================================== */

  --fd-action-link-bg: var(--fd-card);
  --fd-action-link-bg-hover: var(--fd-muted);
  --fd-action-link-border: var(--fd-border);
  --fd-action-link-radius: var(--fd-radius-lg);
  --fd-action-link-padding: var(--fd-space-4);
  --fd-action-link-icon-bg: var(--fd-accent-muted);
  --fd-action-link-icon-color: var(--fd-accent);
  --fd-action-link-icon-size: 2.5rem;
  --fd-action-link-title-color: var(--fd-foreground);
  --fd-action-link-title-size: var(--fd-text-base);
  --fd-action-link-title-weight: var(--fd-font-weight-semibold);
  --fd-action-link-description-color: var(--fd-muted-foreground);
  --fd-action-link-description-size: var(--fd-text-sm);

  /* ========================================================================
	   CONTENT CARD COMPONENT TOKENS
	   ======================================================================== */

  --fd-content-card-bg: var(--fd-card);
  --fd-content-card-border: var(--fd-border);
  --fd-content-card-radius: var(--fd-radius-xl);
  --fd-content-card-padding: var(--fd-space-5);
  --fd-content-card-icon-bg: var(--fd-accent-muted);
  --fd-content-card-icon-color: var(--fd-accent);
  --fd-content-card-icon-size: 2.75rem;
  --fd-content-card-title-color: var(--fd-foreground);
  --fd-content-card-title-size: var(--fd-text-lg);
  --fd-content-card-meta-color: var(--fd-muted-foreground);
  --fd-content-card-meta-size: var(--fd-text-sm);
  --fd-content-card-description-color: var(--fd-muted-foreground);
  --fd-content-card-description-size: var(--fd-text-sm);

  /* ========================================================================
	   SEARCH INPUT COMPONENT TOKENS
	   ======================================================================== */

  --fd-search-bg: var(--fd-card);
  --fd-search-border: var(--fd-border);
  --fd-search-border-focus: var(--fd-primary);
  --fd-search-radius: var(--fd-radius-lg);
  --fd-search-padding-x: var(--fd-space-4);
  --fd-search-padding-y: var(--fd-space-3);
  --fd-search-icon-color: var(--fd-muted-foreground);
  --fd-search-placeholder-color: var(--fd-muted-foreground);
  --fd-search-text-color: var(--fd-foreground);

  /* ========================================================================
	   DATA TABLE COMPONENT TOKENS
	   ======================================================================== */

  --fd-table-bg: var(--fd-card);
  --fd-table-border: var(--fd-border);
  --fd-table-radius: var(--fd-radius-lg);
  --fd-table-header-bg: var(--fd-muted);
  --fd-table-header-text: var(--fd-muted-foreground);
  --fd-table-header-weight: var(--fd-font-weight-semibold);
  --fd-table-row-hover: var(--fd-muted);
  --fd-table-row-border: var(--fd-border-muted);
  --fd-table-cell-padding-x: var(--fd-space-4);
  --fd-table-cell-padding-y: var(--fd-space-3);

  /* ========================================================================
	   PILL COMPONENT TOKENS
	   ======================================================================== */

  --fd-pill-font-weight: var(--fd-font-weight-medium);
  --fd-pill-border-width: 1px;
  --fd-pill-padding-x-sm: var(--fd-space-2);
  --fd-pill-padding-y-sm: 0.25rem;
  --fd-pill-padding-x-md: var(--fd-space-3);
  --fd-pill-padding-y-md: var(--fd-space-1);
  --fd-pill-padding-x-lg: var(--fd-space-4);
  --fd-pill-padding-y-lg: var(--fd-space-2);
}
