/* Radio App Design Constants */

:root {
  /* Core Semantic Colors */
  --success: #22c55e;
  --success-light: #dcfce7;
  --success-dark: #16a34a;

  --error: #ef4444;
  --error-light: #fecaca;
  --error-dark: #dc2626;

  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --warning-dark: #d97706;

  --info: #3b82f6;
  --info-light: #dbeafe;
  --info-dark: #2563eb;

  --favorite: #ffc107;
  --favorite-light: #fff3cd;
  --favorite-dark: #e0a800;

  /* Focus States */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
  --focus-ring-offset:
    0 0 0 2px var(--background-primary), 0 0 0 4px rgba(59, 130, 246, 0.2);

  /* Interactive States */
  --hover-overlay: rgba(0, 0, 0, 0.04);
  --active-overlay: rgba(0, 0, 0, 0.08);

  /* Component Specific */
  --button-height-sm: 2rem;
  --button-height-md: 2.5rem;
  --button-height-lg: 3rem;

  --input-height-sm: 2rem;
  --input-height-md: 2.5rem;
  --input-height-lg: 3rem;

  --checkbox-size: 1rem;
  --radio-size: 1rem;

  /* Form Constants */
  --form-label-font-weight: var(--font-weight-medium);
  --form-label-font-size: var(--font-size-sm);
  --form-label-margin-bottom: var(--spacing-xs);

  --form-input-padding-x: var(--padding-md);
  --form-input-padding-y: var(--padding-sm);
  --form-input-border-width: var(--border-width-1);
  --form-input-border-radius: var(--border-radius-md);

  --form-error-color: var(--error);
  --form-error-font-size: var(--font-size-xs);
  --form-error-margin-top: var(--spacing-xs);

  --form-help-color: var(--text-muted);
  --form-help-font-size: var(--font-size-xs);
  --form-help-margin-top: var(--spacing-xs);

  /* Button Constants */
  --button-padding-x-sm: var(--padding-sm);
  --button-padding-y-sm: var(--padding-xs);
  --button-padding-x-md: var(--padding-md);
  --button-padding-y-md: var(--padding-sm);
  --button-padding-x-lg: var(--padding-lg);
  --button-padding-y-lg: var(--padding-md);

  --button-font-weight: var(--font-weight-medium);
  --button-border-radius: var(--border-radius-md);
  --button-border-width: var(--border-width-1);

  /* Card Constants */
  --card-border-width: var(--border-width-1);
  --card-border-radius: var(--border-radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Modal Constants */
  --modal-backdrop-color: rgba(0, 0, 0, 0.5);
  --modal-border-radius: var(--border-radius-lg);
  --modal-shadow: var(--shadow-xl);
  --modal-padding: var(--spacing-xl);

  /* Dropdown Constants */
  --dropdown-shadow: var(--shadow-lg);
  --dropdown-border-radius: var(--border-radius-md);
  --dropdown-border-width: var(--border-width-1);
  --dropdown-padding: var(--spacing-xs);

  /* Tab Constants */
  --tab-padding: var(--padding-sm) var(--padding-md);
  --tab-border-width: var(--border-width-2);
  --tab-border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;

  /* Accessibility */
  --focus-visible-outline: 2px solid var(--accent);
  --focus-visible-outline-offset: 2px;
}