// Mono Chrome
$dark: rgba(0, 0, 0, 0.9);
$dark-medium: rgba(0, 0, 0, 0.6);
$dark-muted: rgba(0, 0, 0, 0.4);

$light: white;
$light-medium: rgba(255, 255, 255, 0.8);
$light-muted: rgba(255, 255, 255, 0.6);

$monochrome: (
    'dark': $dark,
    'dark-medium': $dark-medium,
    'dark-muted': $dark-muted,
    'light': $light,
    'light-medium': $light-medium,
    'light-muted': $light-muted
);

// Grays
$gray: #575e63;
$gray-50: #eff0f0;
$gray-100: #d1d3d4;
$gray-200: #b2b5b8;
$gray-300: #94989b;
$gray-400: #757b7f;
$gray-500: #575e63;
$gray-600: #484d52;
$gray-700: #3b3c40;
$gray-800: #282b2d;
$gray-900: #181a1b;

$grays: (
    50: $gray-50,
    100: $gray-100,
    200: $gray-200,
    300: $gray-300,
    400: $gray-400,
    500: $gray-500,
    600: $gray-600,
    700: $gray-700,
    800: $gray-800,
    900: $gray-900
);

// Zuora Colors
$primary-900: #10151a;
$primary-800: #1a232b;
$primary-700: #24303c;
$primary-600: #2e3e4d;
$primary: #384b5d;
$primate-400: #5c6b7a;
$primary-300: #808c97;
$primary-200: #a4adb5;
$primary-100: #c8cdd2;
$primary-50: #eceef0;

$secondary-900: #1e362f;
$secondary-800: #325a4e;
$secondary-700: #467e6d;
$secondary-600: #5ba28c;
$secondary: #6ec5ab;
$secondary-400: #88cfba;
$secondary-300: #a2dac9;
$secondary-200: #bde4d8;
$secondary-100: #d7efe8;
$secondary-50: #f1f9f7;

$tertiary-900: #1e292c;
$tertiary-800: #324449;
$tertiary-700: #465f66;
$tertiary-600: #5a7a83;
$tertiary: #6d95a0;
$tertiary-400: #87a8b1;
$tertiary-300: #a2bbc2;
$tertiary-200: #bcced3;
$tertiary-100: #d7e2e5;
$tertiary-50: #f1f5f6;

$blue-gray-900: #2f3235;
$blue-gray-800: #4d5257;
$blue-gray-700: #6c737a;
$blue-gray-600: #8b949d;
$blue-gray: #a9b4bf;
$blue-gray-400: #b8c1ca;
$blue-gray-300: #c8cfd6;
$blue-gray-200: #d7dce1;
$blue-gray-100: #e7eaed;
$blue-gray-50: #f7f8f9;

$highlight-900: #051d33;
$highlight-800: #093055;
$highlight-700: #0c4377;
$highlight-600: #0f5699;
$highlight: #1269ba;
$highlight-400: #3d84c6;
$highlight-300: #689fd3;
$highlight-200: #93badf;
$highlight-100: #bed6ec;
$highlight-50: #e9f1f8;

// State colors
$danger-900: #2d0c0c;
$danger-800: #4b1414;
$danger-700: #6a1d1d;
$danger-600: #882525;
$danger: #a52c2c;
$danger-400: #b55252;
$danger-300: #c57878;
$danger-200: #d69f9f;
$danger-100: #e6c5c5;
$danger-50: #f6ebeb;

$neutral-dark: rgba(0, 0, 0, 0.6);
$neutral: rgba(0, 0, 0, 0.4);
$neutral-light: rgba(0, 0, 0, 0.2);

$success-900: #192719;
$success-800: #2a4029;
$success-700: #3a5a3a;
$success-600: #4b734a;
$success: #5b9c5a;
$success-400: #78a078;
$success-300: #96b596;
$success-200: #b4cab4;
$success-100: #d2dfd2;
$success-50: #f0f4f0;

$warning-900: #461c0e;
$warning-800: #742f18;
$warning-700: #a34121;
$warning-600: #d1542a;
$warning: #f63;
$warning-400: #ff8158;
$warning-300: #ff977d;
$warning-200: #ffb9a2;
$warning-100: #ffd5c7;
$warning-50: #fff1ec;

$zuora-colors: (
    'primary-dark': $primary-700,
    'primary': $primary,
    'primary-light': $primary-300,
    'secondary-dark': $secondary-700,
    'secondary': $secondary,
    'secondary-light': $secondary-300,
    'highlight-dark': $highlight-700,
    'highlight': $highlight,
    'highlight-light': $highlight-300,
    'highlight-overlay': $highlight-50,
    'tertiary-dark': $tertiary-700,
    'tertiary': $tertiary,
    'tertiary-light': $tertiary-300,
    'neutral-dark': $neutral-dark,
    'neutral': $neutral,
    'neutral-light': $neutral-light,
    'blue-gray-light': $blue-gray-300,
    'danger-dark': $danger-700,
    'danger': $danger,
    'danger-light': $danger-300,
    'success-dark': $success-700,
    'success': $success,
    'success-light': $success-300,
    'warning-dark': $warning-700,
    'warning': $warning,
    'warning-light': $warning-300,
    'gray-dark': $gray-700,
    'gray': $gray,
    'gray-light': $gray-300
);

// Functional colors
$background: #eff0f0;
$border: $blue-gray-100;
$border-dark: $blue-gray-200;
$shadow: rgba(0, 0, 0, 0.14);
$theater: rgba($primary-700, 0.8);

$functional-colors: (
    'background': $background,
    'border': $border,
    'border-dark': $border-dark,
    'link': $highlight,
    'link-hover': $highlight-300,
    'shadow': $shadow,
    'theater': $theater,
    'text': $dark,
    'text-medium': $dark-medium,
    'text-muted': $dark-muted,
);

// Typography
$font-family: 'Muli', sans-serif;
$font-family-monospace: 'Source Code Pro', monospace;
$font-size-base: 0.875rem;
$font-size-xs: 0.75rem;
$font-size-sm: 0.75rem;
$font-size-lg: 1rem;
$line-height-base: 1.5;
$headings-line-height: $line-height-base;

// Letter spacing
$ls-closer: -0.025rem;
$ls-close: -0.0125rem;
$ls-wide: 0.0125rem;
$ls-wider: 0.031rem;

// Letter spacing I don't think will be around long
$ls-widest: 0.0625rem;
$ls-comically-wide: 0.109rem;

// Functional font sizes:
$h1-font-size: 2rem;
$h2-font-size: 1.5rem;
$h3-font-size: 1.25rem;
$h4-font-size: 1rem;
$h5-font-size: $font-size-base;
$h6-font-size: $font-size-base;

// Animation lengths
$animation-length-shorter: 0.1s ease;
$animation-length-short: 0.2s ease;
$animation-length: 0.3s ease;
$animation-length-long: 0.4s ease;
$animation-length-longer: 0.5s ease;

// ease variations
$animation-length-shorter-out: 0.1s ease-out;
$animation-length-short-out: 0.2s ease-out;
$animation-length-out: 0.3s ease-out;
$animation-length-long-out: 0.4s ease-out;
$animation-length-longer-out: 0.5s ease-out;

$animation-length-shorter-in: 0.1s ease-in;
$animation-length-short-in: 0.2s ease-in;
$animation-length-in: 0.3s ease-in;
$animation-length-long-in: 0.4s ease-in;
$animation-length-longer-in: 0.5s ease-in;

$animation-length-shorter-lin: 0.1s;
$animation-length-short-lin: 0.2s;
$animation-length-lin: 0.3s;
$animation-length-long-lin: 0.4s;
$animation-length-longer-lin: 0.5s;

// Bootstrap Variable overrides
$font-family-sans-serif: var(--anj-font-family);
$font-family-base: $font-family-sans-serif;

$body-bg:  var(--anj-background);
$body-color:  var(--anj-text);

$label-margin-bottom: 0;

$link-color: var(--anj-highlight);
$link-hover-color: var(--anj-highlight-light);

$spacer: 1rem;

$text-muted: var(--anj-text-muted);

$zindex-dropdown: 1060;

$theme-colors: (
    primary: $primary,
    secondary: $secondary,
    success: $success,
    info: $tertiary,
    warning: $warning,
    danger: $danger,
    light: $light,
    dark: $dark
);