/**
 * DSS Theme - Layer 2 (Semantic Mapping)
 *
 * Maps design tokens to semantic purposes.
 * This layer creates the bridge between raw design tokens
 * and component-specific styling.
 *
 * FIRST PRINCIPLES:
 * - No fallback values - tokens layer MUST load first
 * - If tokens are missing, theme-loader.js handles it with fallback CSS file
 * - Components should use these semantic tokens, not raw tokens directly
 */

:root {
  /* ==========================================================================
     App Shell Semantic Tokens
     ========================================================================== */

  /* Header */
  --header-bg: var(--ds-color-surface-0);
  --header-border: var(--ds-color-border);
  --header-text: var(--ds-color-foreground);
  --header-height: var(--app-header-height);

  /* Sidebar */
  --sidebar-bg: var(--ds-color-surface-0);
  --sidebar-border: var(--ds-color-border);
  --sidebar-text: var(--ds-color-foreground);
  --sidebar-width: var(--app-sidebar-width);

  /* Main Content */
  --main-bg: var(--ds-color-background);
  --main-text: var(--ds-color-foreground);

  /* ==========================================================================
     Navigation Semantic Tokens
     ========================================================================== */

  --nav-item-text: var(--ds-color-foreground);
  --nav-item-text-muted: var(--ds-color-muted-foreground);
  --nav-item-bg-hover: var(--ds-color-accent);
  --nav-item-bg-active: var(--ds-color-accent);
  --nav-item-text-active: var(--ds-color-primary);
  --nav-item-border-focus: var(--ds-color-ring);
  --nav-section-title: var(--ds-color-muted-foreground);
  --nav-item-radius: var(--ds-radius-md);
  --nav-item-padding: var(--ds-space-3);
  --nav-item-gap: var(--ds-space-3);

  /* ==========================================================================
     Button Semantic Tokens
     ========================================================================== */

  /* Default Button */
  --button-bg: var(--ds-color-primary);
  --button-text: var(--ds-color-primary-foreground);
  --button-border: var(--ds-color-primary);
  --button-bg-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 10%));

  /* Secondary Button */
  --button-secondary-bg: var(--ds-color-secondary);
  --button-secondary-text: var(--ds-color-secondary-foreground);

  /* Ghost Button */
  --button-ghost-bg: transparent;
  --button-ghost-text: var(--ds-color-foreground);
  --button-ghost-bg-hover: var(--ds-color-accent);

  /* Outline Button */
  --button-outline-bg: transparent;
  --button-outline-text: var(--ds-color-foreground);
  --button-outline-border: var(--ds-color-border);
  --button-outline-bg-hover: var(--ds-color-accent);

  /* Button Sizing */
  --button-padding-x: var(--ds-space-4);
  --button-padding-y: var(--ds-space-2);
  --button-radius: var(--ds-radius-md);
  --button-font-size: var(--ds-font-size-sm);
  --button-font-weight: var(--ds-font-weight-medium);

  /* ==========================================================================
     Card Semantic Tokens
     ========================================================================== */

  --card-bg: var(--ds-color-surface-0);
  --card-border: var(--ds-color-border);
  --card-text: var(--ds-color-foreground);
  --card-text-muted: var(--ds-color-muted-foreground);
  --card-radius: var(--ds-radius-lg);
  --card-padding: var(--ds-space-5);
  --card-shadow: var(--ds-shadow-sm);
  --card-shadow-hover: var(--ds-shadow-md);

  /* ==========================================================================
     Input Semantic Tokens
     ========================================================================== */

  --input-bg: var(--ds-color-background);
  --input-text: var(--ds-color-foreground);
  --input-placeholder: var(--ds-color-muted-foreground);
  --input-border: var(--ds-color-border);
  --input-border-focus: var(--ds-color-ring);
  --input-radius: var(--ds-radius-md);
  --input-padding-x: var(--ds-space-3);
  --input-padding-y: var(--ds-space-2);

  /* ==========================================================================
     Badge Semantic Tokens
     ========================================================================== */

  --badge-bg: var(--ds-color-primary);
  --badge-text: var(--ds-color-primary-foreground);
  --badge-radius: var(--ds-radius-full);
  --badge-padding-x: var(--ds-space-2-5);
  --badge-padding-y: var(--ds-space-0-5);
  --badge-font-size: var(--ds-font-size-xs);

  /* Badge Variants */
  --badge-secondary-bg: var(--ds-color-secondary);
  --badge-secondary-text: var(--ds-color-secondary-foreground);
  --badge-outline-bg: transparent;
  --badge-outline-text: var(--ds-color-foreground);
  --badge-outline-border: var(--ds-color-border);
  --badge-success-bg: var(--ds-color-success);
  --badge-success-text: var(--ds-color-success-foreground);
  --badge-warning-bg: var(--ds-color-warning);
  --badge-warning-text: var(--ds-color-warning-foreground);
  --badge-error-bg: var(--ds-color-error);
  --badge-error-text: var(--ds-color-error-foreground);

  /* ==========================================================================
     Landing Page Semantic Tokens
     ========================================================================== */

  --landing-bg: var(--ds-color-background);
  --landing-hero-text: var(--ds-color-foreground);
  --landing-hero-subtitle: var(--ds-color-muted-foreground);

  /* Dashboard Card */
  --dashboard-card-bg: var(--ds-color-surface-0);
  --dashboard-card-border: var(--ds-color-border);
  --dashboard-card-border-hover: var(--ds-color-accent);
  --dashboard-card-text: var(--ds-color-foreground);
  --dashboard-card-text-muted: var(--ds-color-muted-foreground);
  --dashboard-card-shadow-hover: var(--ds-shadow-md);

  /* Category Title */
  --category-title-text: var(--ds-color-foreground);
  --category-title-border: var(--ds-color-border);

  /* ==========================================================================
     Toast/Notification Semantic Tokens
     ========================================================================== */

  --toast-bg: var(--ds-color-surface-0);
  --toast-text: var(--ds-color-foreground);
  --toast-border: var(--ds-color-border);
  --toast-shadow: var(--ds-shadow-lg);
  --toast-radius: var(--ds-radius-lg);

  --toast-success-bg: var(--ds-color-success);
  --toast-success-text: var(--ds-color-success-foreground);
  --toast-warning-bg: var(--ds-color-warning);
  --toast-warning-text: var(--ds-color-warning-foreground);
  --toast-error-bg: var(--ds-color-error);
  --toast-error-text: var(--ds-color-error-foreground);
  --toast-info-bg: var(--ds-color-info);
  --toast-info-text: var(--ds-color-info-foreground);

  /* ==========================================================================
     Avatar Semantic Tokens
     ========================================================================== */

  --avatar-bg: var(--ds-color-muted);
  --avatar-text: var(--ds-color-foreground);
  --avatar-border: var(--ds-color-border);
  --avatar-size-sm: 32px;
  --avatar-size-md: 40px;
  --avatar-size-lg: 48px;

  /* ==========================================================================
     Help Panel Semantic Tokens
     ========================================================================== */

  --help-panel-bg: var(--ds-color-surface-1);
  --help-panel-border: var(--ds-color-border);
  --help-panel-text: var(--ds-color-foreground);
  --help-panel-text-muted: var(--ds-color-muted-foreground);

  /* ==========================================================================
     Typography Semantic Tokens
     ========================================================================== */

  --text-heading: var(--ds-color-foreground);
  --text-body: var(--ds-color-foreground);
  --text-muted: var(--ds-color-muted-foreground);
  --text-link: var(--ds-color-primary);
  --text-link-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 20%));

  /* ==========================================================================
     Focus Ring
     ========================================================================== */

  --focus-ring-width: 2px;
  --focus-ring-color: var(--ds-color-ring);
  --focus-ring-offset: 2px;
}