@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 {
  /* Brand Colors */
  --tdp-primary: #0078D4; /* Azure Blue */
  --tdp-primary-dark: #005A9E;
  --tdp-primary-light: #E5F1FB;
  --tdp-primary-success-light: #DFF6F2;
  
  --tdp-secondary: #2C3E50; /* Dark Blue Gray */
  --tdp-secondary-dark: #1A252F;
  
  --tdp-light-blue: #D6EBFF;
  --tdp-light-gray: #F5F5F5;
  --tdp-light-purple: #C0D7E8;

  /* Status Colors */
  --tdp-primary-danger-light: #F5CCD1;
  --tdp-danger-light : #FF6C7D;
  --tdp-danger-dark : #E44766;
  --tdp-primary-warning-light: #FFF3CD;
  --tdp-warning-light : #D6B218;
  --tdp-warning-dark : #C58C11;

  /* Borders */
  --tdp-light-border: 1px solid #DCDCDC;
  --tdp-primary-border: 1px solid #0078D4;
  --tdp-form-element-border: 1px solid #C3C3E5;
  --tpd-gray-200-border: 1px solid #DDDDDD;
  --tdp-border-graph: 2px solid #EFEEEB;
  --tdp-border-green: #2CA597;
  --tdp-border-color-on-error: #FF6C7D;
  --tdp-table-border-color: #E5E5E5;

  /* 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: #007AC3; /* Dark navy for nav */
  --tdp-body-bg-color: #F7F9FB;
  --tdp-tab-active: #EBEDF4;
  --tdp-light-green: #D7F8F3;
  --tdp-light-red: #FFD1CE;
  --tdp-login-form: #FFFFFF; /* White for form background */

  /* Text Colors */
  --tdp-text-color: #333333;
  --tdp-text-color-extra-dark: #000000;
  --tdp-link-color: #0078D4;
  --tdp-nav-link-color: #FFFFFF;
  --tdb-text-color-dark: #1E1E1E;
  --tdb-text-color-gray: #666666;
  --tbd-text-colot-gray-mid: #4D4D4D;
  --tdb-text-color-gray-lighter: #A0A0A0;
  --tdp-text-on-red-background: #EA4766;

  /* Buttons */
  --tdp-primary-btn-color: #0078D4;
  --tdp-primary-btn-border: 2px solid #0078D4;
  --tdp-secondary-btn-color: #2C3E50;
  --tdp-secondary-btn-border: 2px solid #2C3E50;
  --tdp-danger-btn-color: #FF6C7D;
  --tdp-danger-btn-border: 2px solid #FF6C7D;
  --tdp-danger-outline-btn-border: 2px solid #E44766;
  --tdp-warning-btn-color: #D6B218;
  --tdp-warning-btn-border: 2px solid #C58C11;
  --tdp-warning-outline-btn-border: 2px solid #D6B218;

  /* Alert Boxes */
  --tdp-alert-success-bg-color: #E6F9F1;
  --tdp-alert-success-border-color: #3ECCBB;
  --tdp-alert-success-text-color: #27887D;
  --tdp-alert-info-bg-color: #EAF4FB;
  --tdp-alert-info-border-color: #0078D4;
  --tdp-alert-info-text-color: #1A252F;
  --tdp-alert-warning-bg-color: #FFFBEA;
  --tdp-alert-warning-border-color: #FFC107;
  --tdp-alert-warning-text-color: #996900;
  --tdp-alert-danger-bg-color: #FCE8E8;
  --tdp-alert-danger-border-color: #FF7787;
  --tdp-alert-danger-text-color: #AD465A;

  /* Icons */
  --tdp-icon-success-dark: #007B6E;

  /* Common UI Radius */
  --tdp-login-form-border-radius: 0px;
  --tdp-card-border-radius: 0px;
  --tdp-border-radius: 0px;
  --default-border-radius: 0px;

  /* Branding and Highlights */
  --action-brand-default: #1E70BF;
  --border-brand-default: #2A4DD0;
  --border-brand-hover: #223EAC;
  --link-default: #0078D4;
}


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

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

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

/* Gradient backgrounds */
.dark-to-light-bg {
  background-image: url("/assets/images/hero-gradient.jpg");
  color: white;
}

.light-to-dark-bg {
  background: linear-gradient(93.59deg, #505071 19.75%, #36364C 81.94%);
  color: white;
}

.container {
  max-width: 1230px;
}