$theme-version: 2.1;

@import "../inoby-theme/variables";

$theme-name: "podoblazom";

$border-radius: 24px;
/**
 * HEADER
 */
$fs-header-li: 1.6rem;
$fw-header: 600;
$header-pd: 3rem 0;
$header-tt: none;
$sticky-header-pd: 0;
$fs-cart-count: 1.2rem !default;
//active-item
$header-item-pd: 0 3.2rem 0 1.8rem;
$header-item-a-pd: 0;
$header-item-bb: none;
$header-item-active-bb: none;
$header-item-active-col: $col-prm;
$header-item-active-fw: 600;
$header-item-active-bb: none;

/**
 * TYPOGRAPHY
 */
$font-family: "Manrope", sans-serif;
$font-family-headings: "Playfair Display", serif;
$font-family-cursive: "Comforter", cursive;

$fw-light: 300;
$fw-regular: 400;
$fw-medium: 500;
$fw-semi: 600;
$fw-bold: 700;

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

$fs-h1: calc(6.4rem * var(--font-size-ratio, 1));
$fs-h2: calc(4.8rem * var(--font-size-ratio, 1));
$fs-h3: calc(3.6rem * var(--font-size-ratio, 1));
$fs-h4: calc(2.4rem * var(--font-size-ratio, 1));
$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.6rem * var(--font-size-ratio, 1));

// Font-family
$ff-h1: $font-family-headings !default;
$ff-h2: $font-family-headings !default;
$ff-h3: $font-family-headings !default;
$ff-h4: $font-family-headings !default;
$ff-h5: $font-family-headings !default;
$ff-h6: $font-family-headings !default;

// Weights
$fw-h1: $fw-light !default;
$fw-h2: $fw-light !default;
$fw-h3: $fw-light !default;
$fw-h4: $fw-medium;
$fw-h5: $fw-light !default;
$fw-h6: $fw-light !default;

// Line heights
$lh-h1: 120%;
$lh-h2: 120%;
$lh-h3: 120%;
$lh-h4: 120%;
$lh-h5: $lh-1 !default;
$lh-h6: $lh-1 !default;
$lh-p: 180%;

// Text transforms
$tt-h1: none !default;
$tt-h2: none;
$tt-h3: none !default;
$tt-h4: none !default;
$tt-h5: none !default;
$tt-h6: none !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;

/** 
 * COLORS 
 */
$white: #fff;
$black: #000;

$gray100: var(--color-gray100, #efefef);
$gray200: var(--color-gray200, #e1e1e1);
$gray300: var(--color-gray300, #c2c2c2);
$gray400: var(--color-gray400, #c2c2c2);
$gray500: var(--color-gray500, #989898);
$gray600: var(--color-gray600, #676767);
$gray700: var(--color-gray700, #4e4e4e);
$gray800: var(--color-gray800, #3a3a3a);
$gray900: var(--color-gray900, #313131);

$col-bg: var(--color-col-bg, #f7f9f3); // farba pozadia stranky
$col-text: var(--color-col-text, #2b4c4f); // 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);
$header-color: var(--color-header-color, #494949);

$footer-bg: var(--color-footer-bg, #174441);
$footer-color: var(--color-footer-color, #ffffff);

// BASE
$col-prm: var(--color-primary, #ff9d2a); // tlacidla, vsetky hlavne ovladacie prvky, ...
$col-sec: var(--color-secondary, #22625e); // 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, #ffb35c);
$col-sec-l: var(--color-secondary-l, #308882);

// DARK
$col-prm-d: var(--color-primary-d, #f58300);
$col-sec-d: var(--color-secondary-d, #153c3a);

/** 
 * BUTTONS 
 */
$btn-pd: 1.6rem 4rem;
$btn-pd-mobile: 1.3rem 2.1rem;
$btn-bw: 2px !default;
$btn-br: 8px;
$btn-fs: calc(1.6rem * var(--font-size-ratio, 1));
$btn-tt: none;

/** 
 * SPACING 
 */
$space-xxs: 1.6rem;
$space-xs: 2.4rem;
$space-sm: 3.2rem;
$space-md: 4.8rem;
$space-lg: 8rem;

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

/**
 * ADMIN
 */
$admin-col-prm: $col-sec;
$admin-col-prm-h: $col-sec-d;
$admin-col-sec: $col-prm;
$admin-bg: $col-bg;
$admin-col-bg: #1f202f !default;
$admin-col-bg-l: #32333b !default;
$admin-br: 8px;
$admin-bs: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%) !default;

/**
 * INPUTS
 */
$input-b-w: 0px;
$input-bg: $white;
$input-b-col: $gray200;
$input-b-col-focus: $col-prm;
$input-placeholder-col: $gray300;
$input-b-radius: 24px;
$input-padding: 1rem 2.4rem;
$input-padding-left-right: 24px;
$input-padding-top-bottom: 8px;

//mobile
$input-padding-top-bottom-mobile: 8px;
$input-padding-left-right-mobile: 24px;

$input-focus-box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.1), 0px 3px 6px 0px rgba(16, 76, 61, 0.1), 0px 10px 10px 0px rgba(16, 76, 61, 0.09), 0px 23px 14px 0px rgba(16, 76, 61, 0.05),
  0px 41px 16px 0px rgba(16, 76, 61, 0.01), 0px 64px 18px 0px rgba(16, 76, 61, 0);
$inplace-fw: $fw-bold !default;
$inplace-fz: 1.4rem !default;
$inplace-font-color: $gray200 !default;
$inplace-label-transform-start: 50% !default;
$inplace-label-transform-end: -50% !default;

$input-label-padding: 0.8rem !default;
