@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 {
  /* dpa Brand Colors */
  --dpa-leuchtgruen: #00E281;      /* Primary - accents only */
  --dpa-mittelgruen: #00B064;      /* Secondary - buttons, surfaces */
  --dpa-nachtgruen: #006345;       /* Dark - buttons, surfaces, footer */

  /* dpa Gray Scale */
  --dpa-gray-100: #F5F5F5;
  --dpa-gray-200: #EEEEEE;
  --dpa-gray-300: #E3E3E3;
  --dpa-gray-400: #BABABA;
  --dpa-gray-500: #8C8C8C;
  --dpa-gray-600: #7E7E7E;
  --dpa-gray-700: #757575;
  --dpa-gray-800: #4D4D4D;
  --dpa-gray-900: #212121;         /* Main text color */

  /* Mapped variables for compatibility */
  --tdp-primary: var(--dpa-leuchtgruen);
  --tdp-primary-dark: var(--dpa-mittelgruen);
  --tdp-primary-light: var(--dpa-gray-200);
  --tdp-primary-success-light: #D4F5E9;
  --tdp-secondary: var(--dpa-gray-600);
  --tdp-secondary-dark: var(--dpa-gray-800);
  --tdp-light-blue: var(--dpa-mittelgruen);
  --tdp-light-gray: var(--dpa-gray-100);
  --tdp-light-purple: var(--dpa-mittelgruen);
  --tdp-primary-danger-light: #F5CCD1;
  --tdp-danger-light: #FF6C7D;
  --tdp-danger-dark: #E44766;
  --tdp-primary-warning-light: #FFE885;
  --tdp-warning-light: #D6B218;
  --tdp-warning-dark: #C58C11;
  --tdp-light-border: 1px solid var(--dpa-gray-300);
  --tdp-extra-dark: var(--dpa-nachtgruen);
  --tdp-dark: var(--dpa-gray-800);
  --tdp-text-on-red-background: #EA4766;
  --tdp-size-xs: 12px;
  --tdp-size-sm: 14px;
  --tdp-size-md: 16px;
  --tdp-size-lg: 18px;
  --tdp-size-xl: 24px;
  /*
    Extra variables to ease customisation
  */
  /* Background colors */
  --tdp-nav-bg-color: var(--dpa-gray-900);
  --tdp-body-bg-color: white;
  --tdp-tab-active: var(--dpa-gray-100);
  --tdp-light-green: #D4F5E9;
  --tdp-light-red: #FFD1CE;
  --tdp-login-form: rgba(245, 245, 245, 0.85);
  /* Text colors */
  --tdp-text-color: var(--dpa-gray-900);
  --tdp-link-color: var(--dpa-mittelgruen);
  --tdp-nav-link-color: white;
  --tdb-text-color-dark: var(--dpa-gray-900);
  --tdp-text-color-extra-dark: var(--dpa-gray-900);
  --tdb-text-color-gray: var(--dpa-gray-600);
  --tbd-text-colot-gray-mid: var(--dpa-gray-800);
  --tdb-text-color-gray-lighter: var(--dpa-gray-500);
  /* Borders */
  --tdp-card-border-radius: 8px;
  --tdp-border-color-on-error: #FF6C7D;
  --tdp-table-border-color: var(--dpa-gray-300);
  --tdp-border-radius: 8px;
  --tdp-login-form-border-radius: 8px;
  --tdp-primary-border: 1px solid var(--dpa-gray-900);
  --tdp-form-element-border: 2px solid var(--dpa-gray-300);
  --tpd-gray-200-border: 1px solid var(--dpa-gray-200);
  --tdp-border-graph: 2px solid var(--dpa-gray-200);
  --tdp-analytics-select-border: 2px solid var(--dpa-gray-800);
  --tdp-border-green: var(--dpa-mittelgruen);
  /* Buttons */
  --tdp-primary-btn-color: var(--dpa-leuchtgruen);
  --tdp-primary-btn-border: 2px solid var(--dpa-leuchtgruen);
  --tdp-secondary-btn-color: var(--dpa-gray-700);
  --tdp-secondary-btn-border: 2px solid var(--dpa-gray-700);
  --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;
  --action-brand-default: var(--dpa-mittelgruen);
  --border-brand-default: var(--dpa-nachtgruen);
  --border-brand-hover: var(--dpa-nachtgruen);
  --link-default: var(--dpa-mittelgruen);
  /* Alert boxes */
  --tdp-alert-success-bg-color: #D4F5E9;
  --tdp-alert-success-border-color: var(--dpa-mittelgruen);
  --tdp-alert-success-text-color: var(--dpa-nachtgruen);
  --tdp-alert-info-bg-color: var(--dpa-gray-100);
  --tdp-alert-info-border-color: var(--dpa-gray-500);
  --tdp-alert-info-text-color: var(--dpa-gray-800);
  --tdp-alert-warning-bg-color: #FFF5CC;
  --tdp-alert-warning-border-color: #D6B218;
  --tdp-alert-warning-text-color: #996900;
  --tdp-alert-danger-bg-color: #FFE7EA;
  --tdp-alert-danger-border-color: #FF7787;
  --tdp-alert-danger-text-color: #AD465A;
  /* Icons */
  --tdp-icon-success-dark: var(--dpa-mittelgruen);
  --default-border-radius: 8px;

  /* Layout spacing system */
  --layout-navbar-height: 55px;
  --layout-content-padding-top: 24px;
  --layout-sidebar-width: 200px;
  --layout-content-padding-x: 24px;
}

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-x: hidden;
  overflow-y: visible;
}

/* Background sections - dpa style using brand greens */
.dark-to-light-bg {
  background: var(--dpa-nachtgruen);
  color: white;
}

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

.container {
  max-width: 1230px;
}