$theme-name: "inoby-theme" !default;

$zoom_factor: 1 !default;

/** 
 * COLORS 
 */

$white: #fff !default;
$black: #000 !default;

$gray100: var(--color-gray100, #f5f5f5) !default;
$gray200: var(--color-gray200, #c7c7c7) !default;
$gray300: var(--color-gray300, #b4b4b4) !default;
$gray400: var(--color-gray400, #9b9b9b) !default;
$gray500: var(--color-gray500, #808080) !default;
$gray600: var(--color-gray600, #707070) !default;
$gray700: var(--color-gray700, #4e4e4e) !default;
$gray800: var(--color-gray800, #2b2b2b) !default;
$gray900: var(--color-gray900, #171717) !default;

$col-bg: var(--color-col-bg, #ffffff) !default; // farba pozadia stranky
$col-text: var(--color-col-text, #171717) !default; // default farba textov
$col-text-hover: $gray600 !default; // default hover farba textov

$topbar-bg: $col-bg !default;
$topbar-color: $col-text !default;

$header-bg: var(--color-header-bg, #ffffff) !default;
$header-color: var(--color-header-color, #171717) !default;

$footer-bg: var(--color-footer-bg, #171717) !default;
$footer-color: var(--color-footer-color, #ffffff) !default;

// BASE
$col-prm: var(--color-primary, #2196f3) !default; // tlacidla, vsetky hlavne ovladacie prvky, ...
$col-sec: var(--color-secondary, #00bcd4) !default; // hlavne containery, doplnkove prvky, ...

$col-danger: var(--color-danger, #f44336) !default; // error hlasky, chybne vyplnene polia, vsetky veci co zobrazuju chyby, ...
$col-success: var(--color-success, #4caf50) !default; // potvrdzovacie tlacidla, tlacidla v kosiku, ...
$col-warn: var(--color-warn, #ff9800) !default; // upozornenia

// LIGHT
$col-prm-l: var(--color-primary-l, #bbdefb) !default;
$col-sec-l: var(--color-secondary-l, #b2ebf2) !default;

// DARK
$col-prm-d: var(--color-primary-d, #1976d2);
$col-sec-d: var(--color-secondary-d, #0097a7) !default;

/** 
 * CONTRAST COLORS 
 */

// BASE
$col-bg-c: $black !default;

$col-prm-c: $white !default;
$col-sec-c: $white !default;

$col-danger-c: $white !default;
$col-success-c: $white !default;
$col-warn-c: $white !default;

// LIGHT
$col-prm-l-c: $black !default;
$col-sec-l-c: $black !default;

// DARK
$col-prm-d-c: $white !default;
$col-sec-d-c: $white !default;

$popup-overlay: rgba(0, 0, 0, 0.5) !default;

/** 
 * LAYOUT 
 */

$grid: (
  1: 8.333333%,
  2: 16.66%,
  3: 25%,
  4: 33.33%,
  5: 41.66%,
  6: 50%,
  7: 58.33%,
  8: 66.66%,
  9: 75%,
  10: 83.33%,
  11: 91.666666%,
  12: 100%,
) !default;

$columns-grid: (
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
  9: 9,
  10: 10,
  11: 11,
  12: 12,
) !default;

$grid-gap: 3rem !default;
$grid-card-min-width: 24rem !default;

$bp-sm: 576px !default; // mobil
$bp-md: 768px !default; // hi-res mobil / lo-res tablet
$bp-lg: 992px !default; // tablet / lo-res laptop
$bp-xl: 1200px !default; // laptop
$bp-xxl: 1400px !default; // laptop / desktop

$container-sm: 100% !default;
$container-md: 100% !default;
$container-lg: 960px !default;
$container-xl: 1140px !default;
$container-xxl: 1320px !default;

$space-xs: (1rem * 1.6) !default;
$space-sm: (2rem * 1.6) !default;
$space-md: (4rem * 1.6) !default;
$space-lg: (8rem * 1.6) !default;

$space-h1: 4.3rem !default;
$space-h2: 3.4rem !default;

$hr-border-w: 1px;

/**
 * TYPOGRAPHY
 */
$font-family: var(--font-family, "Poppins") !default;
$font-family-headings: var(--font-family-headings, "Poppins") !default;

$fs-p: calc(1.5rem * var(--font-size-ratio, 1)) !default;

$fs-h1: calc(6rem * var(--font-size-ratio, 1)) !default;
$fs-h2: calc(3rem * var(--font-size-ratio, 1)) !default;
$fs-h3: calc(3rem * var(--font-size-ratio, 1)) !default;
$fs-h4: calc(2rem * var(--font-size-ratio, 1)) !default;
$fs-h5: calc(2rem * var(--font-size-ratio, 1)) !default;
$fs-h6: calc(#{$fs-p} * var(--font-size-ratio, 1)) !default;
$fs-1: calc(1.4rem * var(--font-size-ratio, 1)) !default;

$fs-sticky-menu: $fs-h4 !default;

$fs-mini: calc(1rem * var(--font-size-ratio, 1)) !default;
$fs-small: calc(1.2rem * var(--font-size-ratio, 1)) !default;
$fs-huge: calc(7.4rem * var(--font-size-ratio, 1)) !default;

$lh-1: 1.3 !default;
$lh-2: 1.5 !default;

$fw-light: 300 !default;
$fw-regular: 400 !default;
$fw-semi: 600 !default;
$fw-bold: 700 !default;

//BUTTONS
$btn-pd: 2.1rem 7.4rem !default;
$btn-pd-mobile: 2.1rem 2.1rem !default;
$btn-bw: 2px !default;
$btn-br: 3px !default;
$btn-fs: calc(1.4rem * var(--font-size-ratio, 1)) !default;

/**
 * ANIMATIONS
 */
$trans: 0.3s !default;
$trans-h: 0.4s !default;

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

/** ---------------------------------------------
 *              DEPRICATED VARIABLES
 * --------------------------------------------- */

$col-danger-d: #d32f2f !default;
$col-success-d: #388e3c !default;
$col-warn-d: #e64a19 !default;

$col-danger-l: #ffcdd2 !default;
$col-success-l: #c8e6c9 !default;
$col-warn-l: #ffccbc !default;

/** ---------------------------------------------
 *           END DEPRICATED VARIABLES
 * --------------------------------------------- */
