/* nunito-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/assets/nunito-cyrillic-ext-wght-normal-D4X5GqEv.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* nunito-cyrillic-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/assets/nunito-cyrillic-wght-normal-CY6AOgYE.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* nunito-vietnamese-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/assets/nunito-vietnamese-wght-normal-U01xdrZh.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* nunito-latin-ext-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/assets/nunito-latin-ext-wght-normal-CXYtwYOx.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* nunito-latin-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/assets/nunito-latin-wght-normal-BzFMHfZw.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 100;
    font-display: block;
    src: url("/assets/fa-thin-100-DhhCZzPn.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("/assets/fa-light-300-DkKINDXP.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/fa-regular-400-DZdVz17t.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/assets/fa-solid-900-BzTgz20h.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Duotone";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/assets/fa-duotone-900-CvyAkmBY.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/fa-brands-400-DlyJ3OTz.woff2") format("woff2");
}
:root,:host{--font-sans:"Nunito Variable", "Nunito", monospace}html{font-family:var(--font-sans)}
:root {
    --red: #db2828;
    --orange: #f2711c;
    --yellow: #fbbd08;
    --raspberry: #ff5264;
    --olive: #b5cc18;
    --green: #21ba45;
    --teal: #00b5ad;
    --blue: #2185d0;
    --violet: #6435c9;
    --purple: #a333c8;
    --pink: #e03997;
    --brown: #a5673f;
    --grey: #767676;
    --black: #1b1c1d;
    --aqua: #1cd0bf;
    --white: #ffffff;
    --neon: #e2ff41;
    --sky-blue: #c3e7f5;

    --red-bg: #ffe8e6;
    --orange-bg: #ffedde;
    --yellow-bg: #fff8db;
    --olive-bg: #fbfdef;
    --green-bg: #e5f9e7;
    --teal-bg: #e1f7f7;
    --blue-bg: #dff0ff;
    --violet-bg: #eae7ff;
    --purple-bg: #f6e7ff;
    --pink-bg: #ffe3fb;
    --brown-bg: #f1e2d3;
    --aqua-bg: #c8fdf8;
    --grey-bg: #f1f1f1;

    --brand-green: #00b5ad;
    --brand-blue: #2185d0;

    --shade-1: rgba(0, 0, 0, 0.05);
    --shade-2: rgba(0, 0, 0, 0.1);
    --shade-3: rgba(0, 0, 0, 0.15);
    --shade-4: rgba(0, 0, 0, 0.2);
    --shade-5: rgba(0, 0, 0, 0.25);

    --shade-solid-1: oklch(95% 0 0);
    --shade-solid-2: oklch(90% 0 0);
    --shade-solid-3: oklch(85% 0 0);
    --shade-solid-4: oklch(80% 0 0);
    --shade-solid-5: oklch(75% 0 0);

    --color-bg-light: #fff;
    --color-bg-dark: #333;
    --color-fg-light: rgba(0, 0, 0, 0.8);
    --color-fg-dark: rgba(255, 255, 255, 1);
    --color-bg: var(--color-bg-light);
    --color-bg-translucent: hsla(0, 0%, 100%, 0.9);
    --color-fg: var(--color-fg-light);

    --color-primary: var(--blue);
    --color-primary-bg: var(--blue-bg);
    --color-positive: var(--green);
    --color-positive-bg: var(--green-bg);
    --color-neutral: var(--grey);
    --color-negative: var(--red);
    --color-negative-bg: var(--red-bg);

    --backdrop-color: var(--color-bg);

    --primary: var(--blue);
    --gradient-brand: linear-gradient(125deg, var(--blue), var(--teal));
    --gradient-purple: linear-gradient(var(--gradient-angle, 90deg), #804896, #564696);

    --surface-document: var(--white);

    --backdrop-blur: blur(5px);
    --shadow-color: 0deg 0% 0%;

    --shadow-elevation-medium:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11), 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.11),
        2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.11), 5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.11);

    --box-shadow: var(--shadow-elevation-medium);
    --border-radius: 0.5em;

    --font-family: "Nunito Variable", sans-serif;

    --font-size-base: 16px;

    --font-size-tiny: 0.6rem;
    --font-size-small: 0.8rem;
    --font-size-default: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.1rem;
    --font-size-big: 1.2rem;
    --font-size-huge: 1.5rem;
    --font-size-massive: 2rem;
    --font-size-enormous: 2.5rem;
    --font-size-giant: 4rem;

    --font-size-tinier: 0.6em;
    --font-size-smaller: 0.8em;
    --font-size-mediumer: 1em;
    --font-size-larger: 1.1em;
    --font-size-bigger: 1.2em;
    --font-size-huger: 1.5em;
    --font-size-massiver: 2em;
    --font-size-enormouser: 2.5em;
    --font-size-gianter: 4em;

    --spacing: 0.5em;

    --column-width-employee: 30ch;
    --column-width-date: 15ch;
}

@property --gradient-start {
    syntax: "<color> | <custom-ident>";
    initial-value: #00b5ad;
    inherits: true;
}

@property --gradient-end {
    syntax: "<color> | <custom-ident>";
    initial-value: #2185d0;
    inherits: true;
}

:root {
    --radius: 0.625rem;
    --radius-relative: 0.5em;
    --radius-round: 1e5px;

    /* Clip paths for half-day absence visualization */
    /* Creates a diagonal triangle covering half the element (bottom-left triangle) */
    --path-diagonal-half: polygon(0% 0%, 0% 100%, 100% 0%);
    /* Empty polygon for transitions (no visible area) */
    --path-diagonal-half-empty: polygon(0% 0%, 0% 0%, 0% 0%);
    /* Extended polygon for transitions (covers entire area and beyond) */
    --path-diagonal-half-full: polygon(0% 0%, 0% 200%, 200% 0%);
}