/* 
  ⚠️ WARNING: This file is auto-generated by generateTokens.ts
  Do not edit this file directly as your changes will be overwritten.
  
  To modify the design tokens:
  1. Edit libs/blocks/src/theme/tokens/tokens.ts
  2. The pre-commit hook will automatically generate this file when you commit
  
  If you need to generate this file manually (e.g., for testing):
  pnpm nx run @chainlink/blocks:generate-tokens
  
  The tokens are used to maintain consistent theming across the application.
*/

:root {
  /* Background */
  --background: var(--white);
  --background-alt: var(--gray-50);

  /* Foreground */
  --foreground: var(--gray-900);
  --link: var(--blue-500);
  --brand: var(--blue-700);

  /* Muted */
  --muted: var(--gray-100);
  --muted-more: var(--gray-200);
  --muted-foreground: var(--gray-500);
  --muted-more-foreground: var(--gray-400);
  --muted-on-surface: var(--white);
  --muted-on-popover: var(--gray-100);

  /* Border */
  --border: var(--gray-200);
  --border-muted: var(--gray-100);
  --border-hover: var(--gray-300);
  --border-active: var(--gray-400);

  /* Input */
  --input: var(--white);
  --input-disabled: var(--gray-50);
  --input-border: var(--gray-300);
  --input-border-disabled: var(--gray-200);
  --input-border-hover: var(--gray-400);
  --input-border-active: var(--gray-500);
  --input-border-error: var(--red-300);
  --input-foreground: var(--gray-900);
  --input-muted-foreground: var(--gray-400);
  --input-muted-more-foreground: var(--gray-300);

  /* Primary */
  --primary: var(--blue-700);
  --primary-hover: var(--blue-800);
  --primary-disabled: var(--blue-300);
  --primary-foreground: var(--white);
  --primary-disabled-foreground: var(--white);

  /* Secondary */
  --secondary: transparent;
  --secondary-border: var(--blue-400);
  --secondary-border-hover: var(--blue-700);
  --secondary-border-disabled: var(--blue-300);
  --secondary-foreground: var(--blue-700);
  --secondary-disabled-foreground: var(--blue-400);

  /* Tertiary */
  --tertiary: transparent;
  --tertiary-border: var(--gray-300);
  --tertiary-border-hover: var(--gray-400);
  --tertiary-border-disabled: var(--gray-200);
  --tertiary-foreground: var(--gray-950);
  --tertiary-disabled-foreground: var(--gray-400);

  /* Button / Destructive */
  --destructive: var(--red-600);
  --destructive-hover: var(--red-800);
  --destructive-disabled: var(--red-300);
  --destructive-foreground: var(--white);
  --destructive-disabled-foreground: var(--red-100);

  /* Ghost */
  --ghost: var(--gray-100);
  --ghost-hover: var(--gray-200);
  --ghost-disabled: var(--gray-50);
  --ghost-foreground: var(--gray-950);
  --ghost-disabled-foreground: var(--gray-500);

  /* Progress */
  --progress: var(--blue-50);
  --progress-muted: var(--blue-100);
  --progress-border: var(--blue-200);
  --progress-foreground: var(--blue-600);
  --progress-muted-foreground: var(--blue-400);

  /* Success */
  --success: var(--green-50);
  --success-muted: var(--green-100);
  --success-border: var(--green-200);
  --success-foreground: var(--green-600);
  --success-muted-foreground: var(--green-400);

  /* Warning */
  --warning: var(--yellow-50);
  --warning-muted: var(--yellow-100);
  --warning-border: var(--yellow-200);
  --warning-foreground: var(--yellow-600);
  --warning-muted-foreground: var(--yellow-400);

  /* Error */
  --error: var(--red-50);
  --error-muted: var(--red-100);
  --error-border: var(--red-300);
  --error-foreground: var(--red-600);
  --error-muted-foreground: var(--red-400);

  /* Card */
  --card: var(--white);
  --card-alt: var(--blue-50);
  --card-border: var(--gray-200);
  --card-foreground: var(--gray-950);
  --card-muted-foreground: var(--gray-400);
  --card-icon-background: var(--blue-100);

  /* Toggle */
  --toggle-on: var(--green-500);
  --toggle-off: var(--gray-200);

  /* Counter */
  --counter: var(--blue-600);
  --counter-foreground: var(--white);

  /* Popover */
  --popover: var(--gray-950);
  --popover-foreground: var(--white);
  --popover-muted-foreground: var(--gray-400);

  /* Side Panel Button */
  --side-panel-button: var(--gray-900);
  --side-panel-button-foreground: var(--white);
  --side-panel-button-muted-foreground: var(--gray-500);

  /* Segment Button */
  --segment-button-active: var(--blue-100);
  --segment-button-border: var(--gray-200);
  --segment-button-foreground: var(--gray-600);
  --segment-button-active-foreground: var(--blue-950);
  --segment-button-background: var(--white);
  --segment-button-background-hover: var(--gray-50);

  /* Platform Navigation */
  --platform-navigation-active: var(--gray-50);
  --platform-navigation-hover: var(--gray-100);
  --platform-navigation-foreground: var(--gray-500);
  --platform-navigation-muted-foreground: var(--gray-400);
  --platform-navigation-muted-more-foreground: var(--gray-300);
  --platform-navigation-active-foreground: var(--gray-900);
  --platform-navigation-active-brand-foreground: var(--blue-700);
  --platform-navigation-hover-foreground: var(--gray-800);

  /* Ring */
  --ring: var(--gray-400);

  /* Accent */
  --accent: var(--gray-100);

  /* Disabled */
  --disabled: var(--gray-50);

  /* Pill */
  --pill: var(--gray-50);
  --pill-hover: var(--gray-200);
  --pill-active: var(--gray-500);
  --pill-border: var(--gray-200);
  --pill-border-hover: var(--gray-300);
  --pill-foreground: var(--gray-700);
  --pill-active-foreground: var(--gray-50);

  /* Platform Ad */
  --platform-ad: var(--purple-100);
  --platform-ad-border: var(--purple-200);
  --platform-ad-foreground: var(--purple-900);
  --platform-ad-link: var(--purple-500);
  --platform-ad-link-hover: var(--purple-700);

  /* Chart */
  --chart-blue: var(--blue-400);
  --chart-green: var(--green-400);
  --chart-yellow: var(--yellow-400);
  --chart-purple: var(--purple-400);
  --chart-teal: var(--teal-400);
  --chart-orange: var(--orange-400);
  --chart-red: var(--red-400);

  /* Stepper Counter */
  --stepper-counter-active: var(--blue-700);
  --stepper-counter-track-active: var(--blue-500);
  --stepper-counter-done: var(--blue-500);
  --stepper-counter-pending-background: var(--gray-300);
  --stepper-counter-pending-foreground: var(--gray-800);
  --stepper-counter-error: var(--red-600);
  --stepper-counter-foreground: var(--white);
  --stepper-counter-track-pending: var(--gray-300);
}

.dark {
  /* Background */
  --background: var(--gray-900);
  --background-alt: var(--gray-950);

  /* Foreground */
  --foreground: var(--white);
  --link: var(--blue-400);
  --brand: var(--blue-500);

  /* Muted */
  --muted: var(--gray-800);
  --muted-more: var(--gray-700);
  --muted-foreground: var(--gray-400);
  --muted-more-foreground: var(--gray-500);
  --muted-on-surface: var(--gray-800);
  --muted-on-popover: var(--gray-800);

  /* Border */
  --border: var(--gray-800);
  --border-muted: var(--gray-900);
  --border-hover: var(--gray-500);
  --border-active: var(--gray-600);

  /* Input */
  --input: var(--gray-900);
  --input-disabled: var(--gray-900);
  --input-border: var(--gray-600);
  --input-border-disabled: var(--gray-800);
  --input-border-hover: var(--gray-500);
  --input-border-active: var(--gray-400);
  --input-border-error: var(--red-900);
  --input-foreground: var(--gray-300);
  --input-muted-foreground: var(--gray-500);
  --input-muted-more-foreground: var(--gray-700);

  /* Primary */
  --primary: var(--blue-500);
  --primary-hover: var(--blue-700);
  --primary-disabled: var(--blue-950);
  --primary-foreground: var(--white);
  --primary-disabled-foreground: var(--blue-700);

  /* Secondary */
  --secondary: transparent;
  --secondary-border: var(--blue-800);
  --secondary-border-hover: var(--blue-500);
  --secondary-border-disabled: var(--blue-900);
  --secondary-foreground: var(--blue-500);
  --secondary-disabled-foreground: var(--blue-900);

  /* Tertiary */
  --tertiary: transparent;
  --tertiary-border: var(--gray-800);
  --tertiary-border-hover: var(--gray-500);
  --tertiary-border-disabled: var(--gray-700);
  --tertiary-foreground: var(--gray-50);
  --tertiary-disabled-foreground: var(--gray-600);

  /* Button / Destructive */
  --destructive: var(--red-500);
  --destructive-hover: var(--red-700);
  --destructive-disabled: var(--red-950);
  --destructive-foreground: var(--white);
  --destructive-disabled-foreground: var(--red-700);

  /* Ghost */
  --ghost: var(--gray-900);
  --ghost-hover: var(--gray-800);
  --ghost-disabled: var(--gray-950);
  --ghost-foreground: var(--gray-50);
  --ghost-disabled-foreground: var(--gray-600);

  /* Progress */
  --progress: var(--blue-950);
  --progress-muted: var(--blue-900);
  --progress-border: var(--blue-900);
  --progress-foreground: var(--blue-500);
  --progress-muted-foreground: var(--blue-900);

  /* Success */
  --success: var(--green-950);
  --success-muted: var(--green-900);
  --success-border: var(--green-900);
  --success-foreground: var(--green-600);
  --success-muted-foreground: var(--green-900);

  /* Warning */
  --warning: var(--yellow-950);
  --warning-muted: var(--yellow-900);
  --warning-border: var(--yellow-900);
  --warning-foreground: var(--yellow-500);
  --warning-muted-foreground: var(--yellow-900);

  /* Error */
  --error: var(--red-950);
  --error-muted: var(--red-900);
  --error-border: var(--red-900);
  --error-foreground: var(--red-500);
  --error-muted-foreground: var(--red-900);

  /* Card */
  --card: var(--gray-900);
  --card-alt: var(--blue-950);
  --card-border: var(--gray-800);
  --card-foreground: var(--gray-200);
  --card-muted-foreground: var(--gray-700);
  --card-icon-background: var(--blue-900);

  /* Toggle */
  --toggle-on: var(--green-300);
  --toggle-off: var(--gray-700);

  /* Counter */
  --counter: var(--blue-600);
  --counter-foreground: var(--white);

  /* Popover */
  --popover: var(--gray-700);
  --popover-foreground: var(--white);
  --popover-muted-foreground: var(--gray-300);

  /* Side Panel Button */
  --side-panel-button: var(--gray-900);
  --side-panel-button-foreground: var(--white);
  --side-panel-button-muted-foreground: var(--gray-500);

  /* Segment Button */
  --segment-button-active: var(--blue-900);
  --segment-button-border: var(--gray-700);
  --segment-button-foreground: var(--gray-500);
  --segment-button-active-foreground: var(--white);
  --segment-button-background: var(--gray-900);
  --segment-button-background-hover: var(--gray-950);

  /* Platform Navigation */
  --platform-navigation-active: var(--gray-800);
  --platform-navigation-hover: var(--gray-950);
  --platform-navigation-foreground: var(--gray-400);
  --platform-navigation-muted-foreground: var(--gray-500);
  --platform-navigation-muted-more-foreground: var(--gray-600);
  --platform-navigation-active-foreground: var(--gray-100);
  --platform-navigation-active-brand-foreground: var(--blue-400);
  --platform-navigation-hover-foreground: var(--gray-200);

  /* Ring */
  --ring: var(--gray-400);

  /* Accent */
  --accent: var(--gray-800);

  /* Disabled */
  --disabled: var(--gray-950);

  /* Pill */
  --pill: var(--gray-950);
  --pill-hover: var(--gray-800);
  --pill-active: var(--blue-300);
  --pill-border: var(--gray-800);
  --pill-border-hover: var(--gray-700);
  --pill-foreground: var(--gray-50);
  --pill-active-foreground: var(--gray-950);

  /* Platform Ad */
  --platform-ad: var(--purple-900);
  --platform-ad-border: var(--purple-800);
  --platform-ad-foreground: var(--purple-100);
  --platform-ad-link: var(--purple-500);
  --platform-ad-link-hover: var(--purple-300);

  /* Chart */
  --chart-blue: var(--blue-400);
  --chart-green: var(--green-400);
  --chart-yellow: var(--yellow-400);
  --chart-purple: var(--purple-400);
  --chart-teal: var(--teal-400);
  --chart-orange: var(--orange-400);
  --chart-red: var(--red-400);

  /* Stepper Counter */
  --stepper-counter-active: var(--blue-500);
  --stepper-counter-track-active: var(--blue-500);
  --stepper-counter-done: var(--blue-700);
  --stepper-counter-pending-background: var(--gray-700);
  --stepper-counter-pending-foreground: var(--gray-50);
  --stepper-counter-error: var(--red-600);
  --stepper-counter-foreground: var(--white);
  --stepper-counter-track-pending: var(--gray-800);
}