@import 'uikit.less';

// @import 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300..800&display=swap';
@import 'https://rsms.me/inter/inter.css';

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
}

@global-font-family:                            InterVariable, serif;

@global-background:                             #fbf7f5;
@global-muted-background:                       #eaeaea;
@global-primary-background:                     #9bc2b1;
@global-secondary-background:                   #50555b;

@global-color:                                  #50555bee; // rgba(16, 22, 25, 0.75);
@global-emphasis-color:                         #50555bff; // rgba(16, 22, 25, 0.85);
@global-muted-color:                            #50555b80; // rgba(16, 22, 25, 0.5);

@global-link-color:                             #273f35ee;
@global-link-hover-color:                       #273f35ff;

@global-border:                                 #50555b50; // rgba(16, 22, 25, 0.25);
@global-border-width:                           0.5px;
@border-rounded-border-radius:                  1em;

@global-small-box-shadow:                       0 2px 8px rgba(0,0,0,0.08);
@global-medium-box-shadow:                      0 5px 15px rgba(0,0,0,0.08);
@global-large-box-shadow:                       0 14px 25px rgba(0,0,0,0.16);
@global-xlarge-box-shadow:                      0 28px 50px rgba(0,0,0,0.16);


@global-font-size:                              16px;
@global-line-height:                            1.45;

@global-2xlarge-font-size:                      64px;
@global-xlarge-font-size:                       48px;
@global-large-font-size:                        24px;
@global-medium-font-size:                       18px;
@global-small-font-size:                        14px;


@global-margin:                                 20px;
@global-small-margin:                           10px;
@global-medium-margin:                          40px;
@global-large-margin:                           80px;
@global-xlarge-margin:                          140px;

@global-gutter:                                 20px;
@global-small-gutter:                           10px;
@global-medium-gutter:                          30px;
@global-large-gutter:                           80px;

@global-control-height:                         40px;
@global-control-small-height:                   30px;
@global-control-large-height:                   55px;

@container-max-width:                   1280px;
@container-xsmall-max-width:            750px;
@container-small-max-width:             900px;
@container-large-max-width:             1400px;
@container-xlarge-max-width:            1600px;

@base-heading-font-weight:                      500;
@base-heading-color:                            inherit;
@base-strong-font-weight:                       600;

@base-h1-line-height:                           1.05;
@base-h2-line-height:                           1.15;
@base-h3-line-height:                           1.25;
@base-h4-line-height:                           1.35;
@base-h5-line-height:                           1.25;
@base-h6-line-height:                           1.25;
@card-title-font-size:                         @global-large-font-size;
@card-title-line-height:                       1.1;

.hook-base-body() {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


.hook-button() {
    border-radius: 500px;
    font-size: 14px;
}

.hook-form() {
    border-radius: 500px;
}

.hook-label() {
    border-radius: 500px;
}

.hook-marker() {
    background: @global-primary-background;
        border-radius: 500px;
}

.hook-subnav-pill-item() {
    border-radius: 500px;
    border: 1px solid @global-primary-background;
    font-size: 14px;
}

.hook-card() {
    border-radius: @border-rounded-border-radius;
    box-shadow: 0 1px 3px 0 @global-border, 0 1px 2px -1px @global-border;
    & > .uk-card-media-top > img {
        border-radius: @border-rounded-border-radius;
    }
}

.hook-button-default() {
    background-color: transparent;
    box-shadow: 0 0 0 1px @global-border;
}

.hook-card-default() {
    background-color: @global-background;
}

.hook-form() {
    background-color: @global-background;
    box-shadow: 0 0 0 1px @global-border;
}

.hook-form-focus() {
    background-color: @global-background;
    box-shadow: 0 0 0 1px @global-emphasis-color;
    color: @global-emphasis-color;
}

.hook-heading-large() {
    font-size: 64px;
    line-height: 1;
	font-weight: 500;
    & > strong {
	       font-weight: 700;
    }
}

.hook-heading-medium() {
    font-size: 64px;
    line-height: 1;
	font-weight: 500;
    & > strong {
	       font-weight: 700;
    }
}

.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.05;
    mix-blend-mode: multiply;
}



.uk-text-meta {
    text-transform: uppercase;
    font-size: 13px;
    line-height: 15px;
    letter-spacing: 0.1em;
    color: @global-muted-color;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.tm-title {
  font-size: 56px;
}

.tm-subtitle {
    font-size: 20px;
}