/* Design System Variables - TDS Foundation Colors */

:root {
  /* ============================================
     PRIMITIVE TOKENS
     ============================================ */
  
  /* Gradient Brand */
  --base-color-gradient-brand: linear-gradient(45deg, #D10000 0%, #f60439 50%, #b105f4 100%);
  
  /* Coral Red Scale */
  --base-color-coralRed-50: #fee6eb;
  --base-color-coralRed-100: #fcb1c2;
  --base-color-coralRed-200: #fb8ca4;
  --base-color-coralRed-300: #f9577a;
  --base-color-coralRed-400: #f83661;
  --base-color-coralRed-500: #f60439;
  --base-color-coralRed-600: #e00434;
  --base-color-coralRed-700: #af0328;
  --base-color-coralRed-800: #87021f;
  --base-color-coralRed-900: #670218;
  
  /* Fire Red Scale */
  --base-color-fireRed-50: #fae6e6;
  --base-color-fireRed-100: #f1b0b0;
  --base-color-fireRed-200: #ea8a8a;
  --base-color-fireRed-300: #e05454;
  --base-color-fireRed-400: #da3333;
  --base-color-fireRed-500: #d10000;
  --base-color-fireRed-600: #be0000;
  --base-color-fireRed-700: #940000;
  --base-color-fireRed-800: #730000;
  --base-color-fireRed-900: #580000;
  
  /* Violet Scale */
  --base-color-violet-50: #f7e6fe;
  --base-color-violet-100: #e7b2fc;
  --base-color-violet-200: #db8cfa;
  --base-color-violet-300: #cb58f8;
  --base-color-violet-400: #c137f6;
  --base-color-violet-500: #b105f4;
  --base-color-violet-600: #a105de;
  --base-color-violet-700: #7e04ad;
  --base-color-violet-800: #610386;
  --base-color-violet-900: #4a0266;
  
  /* Neutral Scale */
  --base-color-neutral-00: #FFFFFF;
  --base-color-neutral-100: #F2F2F2;
  --base-color-neutral-200: #E6E6E6;
  --base-color-neutral-300: #D9D9D9;
  --base-color-neutral-400: #B3B3B3;
  --base-color-neutral-500: #808080;
  --base-color-neutral-600: #595959;
  --base-color-neutral-700: #333333;
  --base-color-neutral-800: #1A1A1A;
  --base-color-neutral-900: #000000;
  
  /* Green Scale */
  --base-color-green-50: #eaf7e6;
  --base-color-green-100: #bce6b1;
  --base-color-green-200: #9cda8b;
  --base-color-green-300: #6fc956;
  --base-color-green-400: #53bf35;
  --base-color-green-500: #28af03;
  --base-color-green-600: #249f03;
  --base-color-green-700: #1c7c02;
  --base-color-green-800: #166002;
  --base-color-green-900: #114a01;
  
  /* Yellow Scale */
  --base-color-yellow-50: #fef9e6;
  --base-color-yellow-100: #fcecb1;
  --base-color-yellow-200: #fbe38c;
  --base-color-yellow-300: #f9d657;
  --base-color-yellow-400: #f8ce36;
  --base-color-yellow-500: #f6c204;
  --base-color-yellow-600: #e0b104;
  --base-color-yellow-700: #af8a03;
  --base-color-yellow-800: #876b02;
  --base-color-yellow-900: #675102;
  
  /* Orange Scale */
  --base-color-orange-50: #feede6;
  --base-color-orange-100: #fcc7b1;
  --base-color-orange-200: #fbab8c;
  --base-color-orange-300: #f98557;
  --base-color-orange-400: #f86d36;
  --base-color-orange-500: #f64904;
  --base-color-orange-600: #e04204;
  --base-color-orange-700: #af3403;
  --base-color-orange-800: #872802;
  --base-color-orange-900: #671f02;
  
  /* Blue Scale */
  --base-color-blue-50: #e6f0fe;
  --base-color-blue-100: #b1d2fc;
  --base-color-blue-200: #8cbcfb;
  --base-color-blue-300: #579df9;
  --base-color-blue-400: #368af8;
  --base-color-blue-500: #046df6;
  --base-color-blue-600: #0463e0;
  --base-color-blue-700: #034daf;
  --base-color-blue-800: #023c87;
  --base-color-blue-900: #022e67;
  
  /* Brown Scale */
  --base-color-brown-50: #FBFAF8;
  --base-color-brown-100: #F5F3EF;
  --base-color-brown-200: #EEEAE3;
  --base-color-brown-300: #E6E0D6;
  --base-color-brown-400: #DAD2C5;
  --base-color-brown-500: #CCC2B2;
  --base-color-brown-600: #B9AD9A;
  --base-color-brown-700: #9F917B;
  --base-color-brown-800: #7F7261;
  --base-color-brown-900: #5F5447;
  
  /* Spacing Tokens */
  --base-space-0: 0px;
  --base-space-25: 2px;
  --base-space-50: 4px;
  --base-space-75: 6px;
  --base-space-100: 8px;
  --base-space-150: 12px;
  --base-space-200: 16px;
  --base-space-250: 20px;
  --base-space-300: 24px;
  --base-space-400: 32px;
  --base-space-500: 40px;
  --base-space-600: 48px;
  --base-space-700: 56px;
  --base-space-800: 64px;
  --base-space-900: 72px;
  --base-space-1000: 80px;
  --base-space-1100: 88px;
  --base-space-1200: 96px;
  --base-space-1300: 104px;
  
  /* Size Tokens */
  --base-size-0: 0px;
  --base-size-25: 2px;
  --base-size-50: 4px;
  --base-size-100: 8px;
  --base-size-150: 12px;
  --base-size-200: 16px;
  --base-size-250: 20px;
  --base-size-300: 24px;
  --base-size-400: 32px;
  --base-size-500: 40px;
  --base-size-550: 44px;
  --base-size-600: 48px;
  --base-size-650: 52px;
  --base-size-700: 64px;
  --base-size-800: 80px;
  --base-size-900: 96px;
  
  /* Border Width Tokens */
  --base-border-width-0: 0px;
  --base-border-width-50: 0.5px;
  --base-border-width-100: 1px;
  --base-border-width-150: 1.5px;
  --base-border-width-200: 2px;
  --base-border-width-300: 3px;
  --base-border-width-400: 4px;
  
  /* Border Style Tokens */
  --base-border-style-none: none;
  --base-border-style-solid: solid;
  --base-border-style-dashed: dashed;
  --base-border-style-dotted: dotted;
  
  /* Border Radius Tokens */
  --base-radius-0: 0px;
  --base-radius-25: 2px;
  --base-radius-50: 4px;
  --base-radius-75: 6px;
  --base-radius-100: 8px;
  --base-radius-150: 12px;
  --base-radius-200: 16px;
  --base-radius-full: 50%;
  
  /* ============================================
     SEMANTIC TOKENS
     ============================================ */
  
  /* Brand Colors */
  --sys-color-brand: var(--base-color-gradient-brand);
  --sys-color-error: var(--base-color-fireRed-600);
  --sys-color-success: var(--base-color-green-600);
  --sys-color-info: var(--base-color-blue-600);
  --sys-color-warning: var(--base-color-orange-400);
  
  /* Action Background Colors */
  --sys-action-bg-primary-default: var(--base-color-coralRed-500);
  --sys-action-bg-primary-hover: var(--base-color-fireRed-500);
  --sys-action-bg-primary-active: var(--base-color-coralRed-500);
  --sys-action-bg-secondary-default: var(--base-color-neutral-800);
  --sys-action-bg-secondary-hover: var(--base-color-neutral-900);
  --sys-action-bg-secondary-active: var(--base-color-neutral-800);
  --sys-action-bg-disable-primary: #EA8A8A;
  --sys-action-bg-disable-secondary: var(--base-color-neutral-400);
  --sys-action-border-color-disable: #EA8A8A;
  
  /* Action Foreground Colors */
  --sys-action-fg-primary: var(--base-color-neutral-00);
  --sys-action-fg-secondary: var(--base-color-coralRed-500);
  --sys-action-fg-disable-default: var(--base-color-neutral-200);
  --sys-action-fg-disable-strong: var(--base-color-neutral-400);
  
  /* Action Border Colors */
  --sys-action-border-color-primary: var(--base-color-coralRed-500);
  --sys-action-border-color-secondary: var(--base-color-neutral-00);
  --sys-action-border-color-disable: var(--base-color-neutral-400);
  
  /* Text Colors */
  --sys-color-text-neutral-default: var(--base-color-neutral-700);
  --sys-color-text-neutral-strong: var(--base-color-neutral-800);
  --sys-color-text-neutral-subtle: var(--base-color-neutral-600);
  --sys-color-text-neutral-inverse-default: var(--base-color-neutral-00);
  --sys-color-text-neutral-inverse-subtle: var(--base-color-neutral-400);
  
  /* Canvas Colors */
  --sys-color-canvas-default: var(--base-color-neutral-00);
  --sys-color-canvas-subtle: var(--base-color-brown-100);
  
  /* Surface Colors */
  --sys-color-surface-default: var(--base-color-neutral-00);
  --sys-color-surface-subtle-primary: var(--base-color-brown-100);
  --sys-color-surface-subtle-secondary: var(--base-color-neutral-200);
  --sys-color-surface-strong: var(--base-color-neutral-800);
  --sys-color-surface-error: var(--base-color-fireRed-50);
  --sys-color-surface-success: var(--base-color-green-50);
  --sys-color-surface-info: var(--base-color-blue-50);
  --sys-color-surface-warning: var(--base-color-yellow-50);
  
  /* Border Colors */
  --sys-color-border-default: var(--base-color-neutral-300);
  --sys-color-border-strong: var(--base-color-neutral-500);
  --sys-color-border-inverse-default: var(--base-color-neutral-00);
  --sys-color-border-inverse-subtle: var(--base-color-neutral-400);
  
  /* Icon Colors */
  --sys-color-icon-default: var(--base-color-neutral-900);
  --sys-color-icon-inverse: var(--base-color-neutral-00);
  
  /* Layout Spacing */
  --sys-space-layout-xs: var(--base-space-200);
  --sys-space-layout-sm: var(--base-space-300);
  --sys-space-layout-md: var(--base-space-400);
  --sys-space-layout-lg: var(--base-space-600);
  --sys-space-layout-xl: var(--base-space-800);
  --sys-space-layout-2xl: var(--base-space-1000);
  --sys-space-layout-3xl: var(--base-space-1200);
  --sys-space-layout-4xl: var(--base-space-1300);
  
  /* Inset Spacing */
  --sys-space-inset-xs: var(--base-space-50);
  --sys-space-inset-sm: var(--base-space-100);
  --sys-space-inset-md: var(--base-space-150);
  --sys-space-inset-lg: var(--base-space-200);
  --sys-space-inset-xl: var(--base-space-250);
  --sys-space-inset-2xl: var(--base-space-300);
  --sys-space-inset-3xl: var(--base-space-400);
  --sys-space-inset-4xl: var(--base-space-500);
  
  /* Gap Spacing */
  --sys-space-gap-xs: var(--base-space-50);
  --sys-space-gap-sm: var(--base-space-100);
  --sys-space-gap-md: var(--base-space-200);
  --sys-space-gap-lg: var(--base-space-300);
  --sys-space-gap-xl: var(--base-space-500);
  
  /* Icon Sizes */
  --sys-size-icon-sm: var(--base-size-200);
  --sys-size-icon-md: var(--base-size-300);
  --sys-size-icon-lg: var(--base-size-500);
  --sys-size-icon-xl: var(--base-size-600);
  --sys-size-icon-2xl: var(--base-size-700);
  --sys-size-icon-3xl: var(--base-size-800);
  --sys-size-icon-4xl: var(--base-size-900);
  
  /* Touch Sizes */
  --sys-size-touch-sm: var(--base-size-550);
  --sys-size-touch-md: var(--base-size-600);
  --sys-size-touch-lg: var(--base-size-650);
  
  /* Radius Tokens */
  --sys-radius-none: var(--base-radius-0);
  --sys-radius-sm: var(--base-radius-25);
  --sys-radius-md: var(--base-radius-50);
  --sys-radius-lg: var(--base-radius-100);
  --sys-radius-full: var(--base-radius-full);
  
  /* Border Tokens */
  --sys-border-default-width: var(--base-border-width-100);
  --sys-border-default-style: var(--base-border-style-solid);
  --sys-border-hover-width: var(--base-border-width-200);
  --sys-border-hover-style: var(--base-border-style-solid);
  
  /* ============================================
     LEGACY VARIABLES (for backward compatibility)
     ============================================ */
  
  /* Colors - mapped to semantic tokens */
  --color-primary-blue: var(--sys-action-bg-primary-default);
  --color-primary-blue-alt: var(--sys-action-bg-primary-default);
  --color-primary-hover: var(--sys-action-bg-primary-hover);
  --color-error-red: var(--sys-color-error);
  --color-success-green: var(--sys-color-success);
  --color-secondary-hover-bg: var(--base-color-coralRed-50);
  --color-tertiary-hover-bg: var(--sys-color-canvas-subtle);
  
  /* Background Colors */
  --color-bg-page: var(--sys-color-canvas-subtle);
  --color-bg-white: var(--sys-color-canvas-default);
  
  /* Text Colors */
  --color-text-primary: var(--sys-color-text-neutral-strong);
  --color-text-secondary: var(--sys-color-text-neutral-default);
  --color-text-placeholder: var(--sys-color-text-neutral-subtle);
  --color-text-unit: var(--sys-color-text-neutral-subtle);
  --color-text-disabled: var(--sys-action-fg-disable-strong);
  
  /* Error Colors */
  --color-error-text: var(--sys-color-error);
  --color-error-icon: var(--sys-color-error);
  
  /* Border Colors */
  --color-border-light: var(--sys-color-border-default);
  --color-border-medium: var(--sys-color-border-strong);
  
  /* Typography - KEEP UNCHANGED (will be updated separately) */
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes - sm reserved for description/hint text only */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  
  /* Spacing - mapped to semantic tokens */
  --spacing-xs: var(--sys-space-gap-xs);
  --spacing-sm: var(--sys-space-gap-sm);
  --spacing-md: var(--sys-space-gap-md);
  --spacing-lg: var(--sys-space-gap-lg);
  --spacing-xl: var(--sys-space-layout-md);
  --spacing-2xl: var(--sys-space-layout-lg);
  
  /* Layout */
  --sidebar-width: 320px;
  --header-height: 64px;
  
  /* Border Radius - mapped to semantic tokens */
  --border-radius-sm: var(--sys-radius-sm);
  --border-radius-md: var(--sys-radius-md);
  --border-radius-lg: var(--sys-radius-lg);
  --border-radius-button: var(--sys-radius-sm);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}