@import './components/select.css';
@import './components/buttons.css';
@import './components/card.css';
@import './components/input.css';
@import './components/table.css';
@import './components/alert.css';
@import './components/modal.css';
@import './components/tooltip.css';

@import './pages/catalogue.css';
@import './pages/login.css';
@import './pages/home.css';
@import './pages/api-product.css';
@import './pages/cart.css';
@import './pages/flip-flop.css';
@import './pages/blog.css';
@import './pages/app.css';
@import './pages/users.css';
@import './pages/analytics.css';

@import './common/form.css';
@import './common/navigation.css';
@import './common/typography.css';
@import './common/tyk-icons.css';
@import './common/texts.css';
@import './common/layout.css';

/*
  Global Variables
*/

:root {
  /* Base colors */
  --tdp-primary: #335FFD;
  --tdp-primary-dark: #1A3088;
  --tdp-primary-light: #DEDEE4;
  --tdp-primary-success-light: #EEF8F1;
  --tdp-secondary: #7A79A1;
  --tdp-secondary-dark: #505071;
  --tdp-light-blue: #82BBC6;
  --tdp-light-gray: #EDEDF9;
  --tdp-light-purple: #0C95CF;
  --tdp-primary-danger-light: #F9DDD8;
  --tdp-danger-light: #FF6C7D;
  --tdp-danger-dark: #AE2410;
  --tdp-danger-darker: #8B1D12;
  --tdp-primary-warning-light: #FFE885;
  --tdp-warning-light: #D6B218;
  --tdp-warning-dark: #C58C11;
  --tdp-warning-pressed: #FFECC8;
  --tdp-light-border: 1px solid #C3C3E5;
  --tdp-extra-dark: #36364C;
  --tdp-dark: #041837;
  --tdp-text-on-red-background: #EA4766;
  --tdp-border-green: #2CA597;
  --tdp-neutral: #D8D8DF;
  --tdp-neutral-light: #E6E6EA;
  --tdp-neutral-lighter: #EDEDF0;
  --tdp-neutral-dark: #9D9DAF;
  --tdp-brand-darker: #223EAC;
  --tdp-brand-dark: #2A4DD0;

  /* Font sizes */
  --tdp-size-xs: 12px;
  --tdp-size-sm: 14px;
  --tdp-size-md: 16px;
  --tdp-size-lg: 18px;
  --tdp-size-xl: 24px;

  /* Background colors */
  --tdp-nav-bg-color: linear-gradient(91.35deg, #03031C 12.29%, #371DD7 98.13%, #335FFD 106.47%);
  --tdp-body-bg-color: white;
  --tdp-tab-active: #EFF3FF;
  --tdp-light-green: #D7F8F3;
  --tdp-light-red: #FFD1CE;
  --tdp-login-form: #F0F0F3D9;

  /* Text colors */
  --tdp-text-color: #414160;
  --tdp-link-color: var(--tdp-primary);
  --tdp-link-dark:  #025281;
  --tdp-nav-link-color: white;
  --tdb-text-color-dark: #31394D;
  --tdp-text-color-extra-dark: #03031C;
  --tdb-text-color-gray: #808080;
  --tdb-text-color-gray-mid: #4D4D4D;
  --tdb-text-color-gray-lighter: #868686;
  --tdb-text-default-subdue: var(--tdp-text-color);
  --tdb-text-alert-default: #473717;

  /* Border radii */
  --tdp-card-border-radius: 10px;
  --tdp-border-radius: 20px;
  --tdp-dropdown-menu-radius: 15px;
  --tdp-login-form-border-radius: 8px;
  --default-border-radius: 18px;

  /* Border colors */
  --tdp-border-color-on-error: var(--tdp-danger-light);
  --tdp-table-border-color: #F0F0F3;
  --tdp-primary-border: 1px solid var(--tdp-text-color-extra-dark);
  --tdp-form-element-border: 2px solid var(--tdp-neutral);
  --tpd-gray-200-border: 1px solid #DDDDDD;
  --tdp-border-graph: 2px solid #EFEEEB;
  --tdp-analytics-select-border: 2px solid var(--tdp-secondary-dark);
  --tdp-border-neutral-pressed: 1px solid #656582;

  /* Button colors */
  --tdp-primary-btn-color: var(--tdp-primary);
  --tdp-primary-btn-border: var(--tdp-brand-dark);
  --tdp-primary-btn-hover-color: var(--tdp-brand-dark);
  --tdp-primary-btn-hover-border: var(--tdp-brand-darker);
  --tdp-secondary-btn-color: var(--tdp-neutral-lighter);
  --tdp-secondary-btn-border: var(--tdp-neutral);
  --tdp-secondary-btn-hover-color: var(--tdp-neutral-light);
  --tdp-secondary-btn-hover-border: var(--tdp-neutral-dark);
  --tdp-danger-btn-color: #D82C0D;
  --tdp-danger-btn-border: 1.2px solid var(--tdp-danger-dark);
  --tdp-danger-btn-hover-border: 1.2px solid var(--tdp-danger-darker);
  --tdp-danger-outline-btn-border: 1.2px solid var(--tdp-danger-btn-color);
  --tdp-warning-btn-color: var(--tdp-warning-light);
  --tdp-warning-btn-border: 2px solid var(--tdp-warning-dark);
  --tdp-warning-outline-btn-border: 2px solid var(--tdp-warning-light);
  --action-brand-default: var(--tdp-primary);
  --border-brand-default: var(--tdp-brand-dark);
  --border-brand-hover: var(--tdp-brand-darker);
  --border-neutral-default: var(--tdp-neutral);
  --link-default: #00A6ED;
  --surface-brand-hover: #DEE5FE;
  --surface-neutral-hover: #F8F8F9;
  --surface-default-subdued: var(--tdp-table-border-color);

  /* Alert boxes */
  --tdp-alert-success-bg-color: var(--tdp-primary-success-light);
  --tdp-alert-success-border-color: #238741;
  --tdp-alert-sucess-icon-color: #2BA84A;
  --tdp-alert-success-text-color: var(--tdb-text-alert-default);
  --tdp-alert-info-bg-color: #EBF8FE;
  --tdp-alert-info-border-color: #0186C4;
  --tdp-alert-info-text-color: #023056;
  --tdp-alert-warning-bg-color: #FFF5CC;
  --tdp-alert-warning-border-color: var(--tdp-warning-light);
  --tdp-alert-warning-text-color: #996900;
  --tdp-alert-danger-bg-color: #FCEFEC;
  --tdp-alert-danger-border-color: #AE2410;
  --tdp-alert-danger-text-color: var(--tdb-text-alert-default);
  --tdp-alert-danger-icon-color: #D82C0D;

  /* Icons */
  --tdp-icon-success-dark: #00B798;
}

html {
  scroll-padding-top: 70px;
}

body {
  padding-top: 55px;
  height: 100vh;
  color: var(--tdp-text-color-extra-dark);
  background-color: var(--tdp-body-bg-color);
}

.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Gradient backgrounds */
.dark-to-light-bg {
  background: var(--tdp-dark);
  color: white;
}

.light-to-dark-bg {
  background: var(--tdp-dark);
  color: white;
}

.container {
  max-width: 1230px;
}