$prefix: bs;

// Grid Containers
// we will want to adapt the defaults in a full redesign
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1160px
);

// Spacing override
$enable-negative-margins: true;

// Typography Overrides
$font-family-sans-serif: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size-base: .75rem; // approx 12px

// Links
$link-decoration:   none;

// Form Overrides
$input-border-radius-lg: 5px;

// Navbar
//$nav-link-height: 38px;
$navbar-brand-font-size: 15px;
$navbar-brand-height: 40px;
$navbar-brand-padding-y: 12px;
$navbar-brand-margin-end: 0;

$navbar-padding-y: 0;
$navbar-padding-x: 0;

$caret-width: 4px;
$caret-vertical-align: $caret-width * .87;

// Breadcrumbs
$breadcrumb-divider: quote(">");

// Dropdowns
$dropdown-border-radius: 3px;
$dropdown-inner-border-radius: 0;
$dropdown-padding-y: 5px;
$dropdown-spacer: -1px;
$dropdown-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
$dropdown-font-size: 12px;

// Badges
$badge-border-radius: .25em;

// Main background & text
$cc-bg:     #f2f2f1;
$cc-text:   #1c2126;

// Success
$cc-att-pos-extra-hi:   #e3f1df;
$cc-att-pos-hi:   #bbe5b3;
$cc-att-pos-mid:  #4aba32;
$cc-att-pos-low:  #118043;
$cc-att-pos-extra-low:  #173630;

// Error
$cc-att-neg-extra-hi:   #fbeae6;
$cc-att-neg-hi:   #fead9a;
$cc-att-neg-mid:  #e73c27;
$cc-att-neg-low:  #bf0712;
$cc-att-neg-extra-low:  #340101;

// Warning/Attention
$cc-light-warm-accent-extra-hi:   #fcf2cd;
$cc-light-warm-accent-hi:   #ffea8a;
$cc-light-warm-accent-mid:  #eec200;
$cc-light-warm-accent-low:  #9c6f19;
$cc-light-warm-accent-extra-low:  #573b00;

// Call to action
$call-to-action-extra-hi: #f4f5fa;
$call-to-action-hi: #b4bcf5;
$call-to-action-mid: #5c6ac5;
$call-to-action-low: #212f78;
$call-to-action-extra-low: #000639;

// Accent light blue: buttons on dark backgrounds, occasional secondary buttons (upload/download)
$cc-light-cool-accent-hi:   #ccf3f4;
$cc-light-cool-accent-mid:  #00bdc5;
$cc-light-cool-accent-low:  #00799a;

// Accent purples used in signup, which uses colors more like dimagi.com than HQ
$color-purple-dark: #43467F;
$color-purple-dark-inverse: #E3D0FF;

// Neutrals used as borders/backgrounds
$cc-neutral-hi:   #d6d6d4;
$cc-neutral-mid:  #685c53;
$cc-neutral-low:  #373534;

// Blues used for links and app manager accents
$cc-brand-hi:   #bcdeff;
$cc-brand-mid:  #004ebc;
$cc-brand-low:  #002c5f;

// Accent colors used in few places (billing, web apps, one-offs). Minimize usage.
$cc-dark-cool-accent-hi:  #d6c5ea;
$cc-dark-cool-accent-mid: #9060c8;
$cc-dark-cool-accent-low: #5d3f82;

$cc-dark-warm-accent-hi:  #ffe3c2;
$cc-dark-warm-accent-mid: #ff8400;
$cc-dark-warm-accent-low: #994f00;


// Colors from the Dimagi color theme
$dimagi-deep-purple: #16006D;
$dimagi-sky: #8EA1FF;
$dimagi-indigo: #3843D0;
$dimagi-marigold: #FEAF31;
$dimagi-sunset: #E44434;
$dimagi-mango: #FC5F36;

// Base color overrides
$blue: #5D70D2;
$green: #358623;
$red: #E13019;
$teal: #01A2A9;
$yellow: $dimagi-marigold;
$indigo: $dimagi-indigo;
$purple: mix($dimagi-mango, $dimagi-indigo, 25%);
$pink: mix($dimagi-mango, $dimagi-indigo, 50%);
$salmon: mix($dimagi-mango, $dimagi-indigo, 75%);
$orange: $dimagi-mango;

// Grays from default stylesheet — needed for reference
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-400: #ced4da;
$gray-600: #6c757d;
$gray-800: #343a40;

// Blues from default stylesheet - needed for reference
$blue-600: shade-color($blue, 20%);
$blue-900: shade-color($blue, 80%);

// Purple from default stylesheet - needed for reference
$purple-400: tint-color($purple, 20%);

// for determining when to show black or white text on top of color
$min-contrast-ratio: 3;

// Theme Colors
$primary:   $blue;
$secondary: $gray-600;
$success:   $green;
$danger:    $red;
$info:      $teal;
$warning:   $yellow;
$light:     $gray-100;
$dark:      $gray-800;
$periwinkle: #6F76AC;

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

$body-color: $dark;
$link-color: $blue-600;
$link-hover-color:$blue-900;
$border-color: $gray-400;

// New gradient for salmon

$salmon-100: tint-color($salmon, 80%);
$salmon-200: tint-color($salmon, 60%);
$salmon-300: tint-color($salmon, 40%);
$salmon-400: tint-color($salmon, 20%);
$salmon-500: $salmon !default;
$salmon-600: shade-color($salmon, 20%);
$salmon-700: shade-color($salmon, 40%);
$salmon-800: shade-color($salmon, 60%);
$salmon-900: shade-color($salmon, 80%);


// Form States

$form-feedback-valid-color:         $success;
$form-feedback-invalid-color:       $danger;
$form-feedback-icon-valid-color:    $form-feedback-valid-color;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

$focus-ring-blur:        0;
$focus-ring-width:      .25rem;
$focus-ring-opacity:    .25;

$input-btn-focus-blur:          $focus-ring-blur;
$input-btn-focus-width:         $focus-ring-width;
$input-focus-width:             $input-btn-focus-width;
$input-btn-focus-color-opacity: $focus-ring-opacity;

$form-validation-states: (
  "valid": (
    "color": var(--#{$prefix}form-valid-color),
    "icon": $form-feedback-icon-valid,
    "tooltip-color": #fff,
    "tooltip-bg-color": var(--#{$prefix}success),
    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
    "border-color": var(--#{$prefix}form-valid-border-color),
  ),
  "invalid": (
    "color": var(--#{$prefix}form-invalid-color),
    "icon": $form-feedback-icon-invalid,
    "tooltip-color": #fff,
    "tooltip-bg-color": var(--#{$prefix}danger),
    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
    "border-color": var(--#{$prefix}form-invalid-border-color),
  ),
  "validating": (
    "color": $secondary,
    "icon": "",
    "tooltip-color": #fff,
    "tooltip-bg-color": var(--#{$prefix}dark),
    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}dark-rgb), $input-btn-focus-color-opacity),
    "border-color": $dark,
  )
);

// Make pagination-lg the same height as other lg inputs
$pagination-padding-x-lg: 1.0rem;
$pagination-padding-y-lg: 0.5rem;

// Table loading indicator
$table-loading-spinner-size: 150px;
$table-loading-spinner-border-width: 20px;

// Override bootstrap position values to include 25%
$position-values: (
  0: 0,
  25: 25%,
  50: 50%,
  100: 100%,
);

// WebApps
$home-screen-start-button: #6AB849;
