@use 'sass:color';
@use 'sass:map';
@use 'variables' as v;

// -----------------------------------------------------------------------------
// Global CSS Variables used across all applications
// -----------------------------------------------------------------------------

:root {
  --synapse-primary-focus-border: #{v.$primary-focus-border};
  --synapse-primary-focus-shadow: #{v.$primary-focus-shadow};
  --synapse-secondary-200-hover: #{v.$secondary-200-hover};
  --synapse-link-underline-color: #{v.$link-underline-color};

  --synapse-primary-action-color-alpha-4: #{v.$primary-action-color-alpha-4};
  --synapse-primary-alpha-05: #{v.$primary-alpha-05};
  --synapse-primary-action-color-alpha-10: #{v.$primary-action-color-alpha-10};

  --synapse-secondary-action-color-alpha-10: #{v.$secondary-action-color-alpha-10};
  --synapse-secondary-action-color-alpha-20: #{v.$secondary-action-color-alpha-20};
  --synapse-secondary-action-color-alpha-50: #{v.$secondary-action-color-alpha-50};

  --synapse-dropdown-disabled-text: #{v.$dropdown-disabled-text};

  // Primary color palette
  --synapse-primary-active: #{v.$primary-action-color-active};

  --synapse-primary-100: #{map.get(v.$primary-color-palette, 100)};
  --synapse-primary-200: #{map.get(v.$primary-color-palette, 200)};
  --synapse-primary-300: #{map.get(v.$primary-color-palette, 300)};
  --synapse-primary-400: #{map.get(v.$primary-color-palette, 400)};
  --synapse-primary-500: #{map.get(v.$primary-color-palette, 500)};
  --synapse-primary-600: #{map.get(v.$primary-color-palette, 600)};
  --synapse-primary-700: #{map.get(v.$primary-color-palette, 700)};
  --synapse-primary-800: #{map.get(v.$primary-color-palette, 800)};
  --synapse-primary-900: #{map.get(v.$primary-color-palette, 900)};

  // Secondary color palette
  --synapse-secondary-100: #{map.get(v.$secondary-color-palette, 100)};
  --synapse-secondary-200: #{map.get(v.$secondary-color-palette, 200)};
  --synapse-secondary-300: #{map.get(v.$secondary-color-palette, 300)};
  --synapse-secondary-400: #{map.get(v.$secondary-color-palette, 400)};
  --synapse-secondary-500: #{map.get(v.$secondary-color-palette, 500)};
  --synapse-secondary-600: #{map.get(v.$secondary-color-palette, 600)};
  --synapse-secondary-700: #{map.get(v.$secondary-color-palette, 700)};
  --synapse-secondary-800: #{map.get(v.$secondary-color-palette, 800)};
  --synapse-secondary-900: #{map.get(v.$secondary-color-palette, 900)};

  // Tertiary color palette
  --synapse-tertiary-100: #{map.get(v.$tertiary-color-palette, 100)};
  --synapse-tertiary-200: #{map.get(v.$tertiary-color-palette, 200)};
  --synapse-tertiary-300: #{map.get(v.$tertiary-color-palette, 300)};
  --synapse-tertiary-400: #{map.get(v.$tertiary-color-palette, 400)};
  --synapse-tertiary-500: #{map.get(v.$tertiary-color-palette, 500)};
  --synapse-tertiary-600: #{map.get(v.$tertiary-color-palette, 600)};
  --synapse-tertiary-700: #{map.get(v.$tertiary-color-palette, 700)};
  --synapse-tertiary-800: #{map.get(v.$tertiary-color-palette, 800)};
  --synapse-tertiary-900: #{map.get(v.$tertiary-color-palette, 900)};

  // Greyscale colors
  --synapse-black: #000;
  --synapse-white: #ffffff;
  --synapse-gray-1000: #22252a;
  --synapse-gray-900: #353a3f;
  --synapse-gray-800: #4a5056;
  --synapse-gray-700: #71767f;
  --synapse-gray-600: #aeb5bc;
  --synapse-gray-500: #d0d4d9;
  --synapse-gray-400: #dfe2e6;
  --synapse-gray-300: #eaecee;
  --synapse-gray-200: #f1f3f5;
  --synapse-gray-100: #fbfbfc;

  // scss stuff that cannot be referenced - breakpoints, computation
  // if it doesn't change per app and is constant, it can stay here

  --synapse-gray-dark: #dcdcdc;
  --synapse-gray-light: #f9f9f9;
  --synapse-background-color-gray: var(--synapse-gray-light);
  --synapse-border-color-gray: var(--synapse-gray-dark);
  --synapse-background-color-gray-light: #fcfcfc;

  // Status Colors
  --synapse-info: #017fa5;
  --synapse-success: #32a330;
  --synapse-warning: #cc9f00;
  --synapse-error: #c13415;

  // Primary / Secondary / Tertiary Action Colors
  --synapse-primary-action-color: #{v.$primary-action-color};
  --synapse-primary-bgcolor-rgba: #{v.$primary-bgcolor-rgba};
  --synapse-secondary-action-color: #{v.$secondary-action-color};
  --synapse-tertiary-action-color: #{v.$tertiary-action-color};

  // Text
  --synapse-text-color-dark: #1a1c29;
  --synapse-text-color-disabled: #bbbbbc;

  // Error Reds
  --synapse-red-error: #b2242a;
  --synapse-red-error2: #c94281;

  // Tabs
  --synapse-active-tab-text: #22252a;
  --synapse-inactive-tab-text: #71767f;

  // Box shadows
  --synapse-box-shadow-med: 0 1px 3px rgba(0, 0, 0, 0.5);
  --synapse-box-shadow-soft: 0 3px 10px rgba(93, 105, 171, 0.1);

  // Affirmative / Warning / Delete / Required
  --synapse-green-affirmative: var(--synapse-success);
  --synapse-yellow-warning: var(--synapse-warning);
  --synapse-red-delete: var(--synapse-red-error2);
  --synapse-red-required: var(--synapse-error);

  // Form Control
  --synapse-gray-input-border: 1px solid #f2f2f2;
  --synapse-input-padding: 12px 13px;
  --synapse-gray-formtext: #515359;

  // Buttons
  --synapse-button-border-radius: #{v.$button-border-radius};
  --synapse-button-text-transform: #{v.$button-text-transform};

  --synapse-gray-regular: #515359; // this is fine, not changing,
  --synapse-gray-deemphasized: #ababac;

  --synapse-space-unit: 2.1rem;
}