/**
 * @file
 * FlowDrop Theme Layer
 *
 * This file maps the core design tokens to component-specific CSS variables.
 * Themes can override this file to customize how components appear while
 * maintaining the overall design system structure.
 *
 * CUSTOMIZATION:
 * To create a custom theme, copy this file to your theme and modify the values.
 * The component-specific variables (--fd-*-*) will cascade to all SDC components.
 */

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

  /* Primary Button */
  --fd-button-primary-bg: var(--fd-color-primary-500);
  --fd-button-primary-bg-hover: var(--fd-color-primary-600);
  --fd-button-primary-bg-active: var(--fd-color-primary-700);
  --fd-button-primary-text: #ffffff;
  --fd-button-primary-border: transparent;

  /* Secondary Button */
  --fd-button-secondary-bg: var(--fd-surface-card);
  --fd-button-secondary-bg-hover: var(--fd-color-gray-50);
  --fd-button-secondary-bg-active: var(--fd-color-gray-100);
  --fd-button-secondary-text: var(--fd-color-gray-700);
  --fd-button-secondary-border: var(--fd-border-color);

  /* Ghost Button */
  --fd-button-ghost-bg: transparent;
  --fd-button-ghost-bg-hover: var(--fd-color-gray-100);
  --fd-button-ghost-text: var(--fd-color-gray-600);

  /* Button Sizing */
  --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-font-size-sm);
  --fd-button-font-weight: var(--fd-font-weight-medium);

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

  --fd-card-bg: var(--fd-surface-card);
  --fd-card-border: var(--fd-border-color);
  --fd-card-radius: var(--fd-radius-xl);
  --fd-card-shadow: var(--fd-shadow-card);
  --fd-card-padding: var(--fd-space-6);

  /* Card hover state */
  --fd-card-hover-shadow: var(--fd-shadow-md);
  --fd-card-hover-border: var(--fd-color-gray-300);

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

  --fd-stat-card-bg: var(--fd-surface-card);
  --fd-stat-card-border: var(--fd-border-color);
  --fd-stat-card-radius: var(--fd-radius-xl);
  --fd-stat-card-padding: var(--fd-space-5);

  --fd-stat-card-value-color: var(--fd-color-gray-900);
  --fd-stat-card-value-size: var(--fd-font-size-3xl);
  --fd-stat-card-value-weight: var(--fd-font-weight-bold);

  --fd-stat-card-label-color: var(--fd-color-gray-500);
  --fd-stat-card-label-size: var(--fd-font-size-sm);
  --fd-stat-card-label-weight: var(--fd-font-weight-medium);

  --fd-stat-card-icon-bg: var(--fd-color-accent-100);
  --fd-stat-card-icon-color: var(--fd-color-accent-600);

  /* ========================================================================
   * 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-font-size-xs);
  --fd-badge-font-weight: var(--fd-font-weight-semibold);
  --fd-badge-text-transform: uppercase;
  --fd-badge-letter-spacing: var(--fd-letter-spacing-wide);

  /* Badge variants */
  --fd-badge-success-bg: var(--fd-color-success-100);
  --fd-badge-success-text: var(--fd-color-success-700);
  --fd-badge-success-border: var(--fd-color-success-500);

  --fd-badge-warning-bg: var(--fd-color-warning-100);
  --fd-badge-warning-text: var(--fd-color-warning-700);
  --fd-badge-warning-border: var(--fd-color-warning-500);

  --fd-badge-error-bg: var(--fd-color-error-100);
  --fd-badge-error-text: var(--fd-color-error-700);
  --fd-badge-error-border: var(--fd-color-error-500);

  --fd-badge-info-bg: var(--fd-color-info-100);
  --fd-badge-info-text: var(--fd-color-info-600);
  --fd-badge-info-border: var(--fd-color-info-500);

  --fd-badge-neutral-bg: var(--fd-color-gray-100);
  --fd-badge-neutral-text: var(--fd-color-gray-600);
  --fd-badge-neutral-border: var(--fd-color-gray-300);

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

  --fd-header-bg: var(--fd-surface-card);
  --fd-header-border: var(--fd-border-color);
  --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-color-gray-900);
  --fd-header-title-size: var(--fd-font-size-xl);
  --fd-header-subtitle-color: var(--fd-color-gray-500);
  --fd-header-subtitle-size: var(--fd-font-size-sm);

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

  --fd-breadcrumb-text-color: var(--fd-color-gray-500);
  --fd-breadcrumb-link-color: var(--fd-color-gray-600);
  --fd-breadcrumb-link-hover: var(--fd-color-primary-500);
  --fd-breadcrumb-separator-color: var(--fd-color-gray-300);
  --fd-breadcrumb-current-color: var(--fd-color-gray-700);
  --fd-breadcrumb-font-size: var(--fd-font-size-sm);

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

  --fd-action-link-bg: var(--fd-surface-card);
  --fd-action-link-bg-hover: var(--fd-color-gray-50);
  --fd-action-link-border: var(--fd-border-color);
  --fd-action-link-radius: var(--fd-radius-lg);
  --fd-action-link-padding: var(--fd-space-4);

  --fd-action-link-icon-bg: var(--fd-color-accent-100);
  --fd-action-link-icon-color: var(--fd-color-accent-600);
  --fd-action-link-icon-size: 2.5rem;

  --fd-action-link-title-color: var(--fd-color-gray-900);
  --fd-action-link-title-size: var(--fd-font-size-base);
  --fd-action-link-title-weight: var(--fd-font-weight-semibold);

  --fd-action-link-description-color: var(--fd-color-gray-500);
  --fd-action-link-description-size: var(--fd-font-size-sm);

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

  --fd-content-card-bg: var(--fd-surface-card);
  --fd-content-card-border: var(--fd-border-color);
  --fd-content-card-radius: var(--fd-radius-xl);
  --fd-content-card-padding: var(--fd-space-5);

  --fd-content-card-icon-bg: var(--fd-color-accent-100);
  --fd-content-card-icon-color: var(--fd-color-accent-600);
  --fd-content-card-icon-size: 2.75rem;

  --fd-content-card-title-color: var(--fd-color-gray-900);
  --fd-content-card-title-size: var(--fd-font-size-lg);

  --fd-content-card-meta-color: var(--fd-color-gray-500);
  --fd-content-card-meta-size: var(--fd-font-size-sm);

  --fd-content-card-description-color: var(--fd-color-gray-600);
  --fd-content-card-description-size: var(--fd-font-size-sm);

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

  --fd-search-bg: var(--fd-surface-card);
  --fd-search-border: var(--fd-border-color);
  --fd-search-border-focus: var(--fd-color-primary-500);
  --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-color-gray-400);
  --fd-search-placeholder-color: var(--fd-color-gray-400);
  --fd-search-text-color: var(--fd-color-gray-900);

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

  --fd-table-bg: var(--fd-surface-card);
  --fd-table-border: var(--fd-border-color);
  --fd-table-radius: var(--fd-radius-lg);

  --fd-table-header-bg: var(--fd-color-gray-50);
  --fd-table-header-text: var(--fd-color-gray-600);
  --fd-table-header-weight: var(--fd-font-weight-semibold);

  --fd-table-row-hover: var(--fd-color-gray-50);
  --fd-table-row-border: var(--fd-color-gray-100);

  --fd-table-cell-padding-x: var(--fd-space-4);
  --fd-table-cell-padding-y: var(--fd-space-3);
}

