/*

	YachtDataPro
	i.yachtdatapro.com
	Jan 2025 AH

-------------------------------------------------*/

/* fonts
-------------------------------------------
font-family:'Inter', Arial, Helvetica, sans-serif; font-weight:400; - google font

300 light
400 regular
500 medium
600 semi bold
700 bold
800 extra bold

*/

:root {
    --font-family: "Inter", Arial, Helvetica, sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semiBold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;

    --color-ui-1: #fff;
    --color-ui-50: #f5f7f8;
    --color-ui-100: #ecf0f3; /* text colour extra light */
    --color-ui-200: #dce4e9;
    --color-ui-300: #c7d1da; /* text colour light */
    --color-ui-400: #afbbca;
    /* standard */
    --color-ui-500: #8f9cb2;
    --text-colour-regular: #8f9cb2;
    --filter-ui-500: invert(64%) sepia(35%) saturate(195%) hue-rotate(179deg) brightness(92%) contrast(84%);
    --color-ui-600: #848ea7;
    --color-ui-700: #717a91;
    --color-ui-800: #5d6576;
    --filter-ui-800: invert(44%) sepia(6%) saturate(1127%) hue-rotate(183deg) brightness(87%) contrast(90%);
    --color-ui-900: #4e5461;
    --color-ui-950: #2e3238; /* text colour dark */
    --filter-ui-950: invert(19%) sepia(6%) saturate(891%) hue-rotate(177deg) brightness(92%) contrast(94%);
    --color-ui-1000: #000;

    --new: #58d33f;
    --in-production: #58d33f;
    --development: #fcbb02;
    --discontinued: #cc0000;
    --new-caption: #fcbb02;
    --hilight-blue: #003166;

    --font-size-xxs: 9px;
    --font-size-xs: 10px;
    --font-size-s: 12px;
    --font-size-r: 13px;
    --font-size-m: 14px;
    --font-size-l: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 20px;
    --font-size-xxxl: 25px;
}

@media screen and (min-width: 1441px) and (max-width: 1919px) {
    :root {
        --font-size-xxs: 10px;
        --font-size-xs: 12px;
        --font-size-s: 13px;
        --font-size-r: 14px;
        --font-size-m: 16px;
        --font-size-l: 20px;
        --font-size-xl: 25px;
        --font-size-xxl: 30px;
        --font-size-xxxl: 35px;
    }
}

@media screen and (min-width: 1920px) {
    :root {
        --font-size-xxs: 10px;
        --font-size-xs: 12px;
        --font-size-s: 13px;
        --font-size-r: 14px;
        --font-size-m: 16px;
        --font-size-l: 20px;
        --font-size-xl: 25px;
        --font-size-xxl: 30px;
        --font-size-xxxl: 35px;
    }
}

@media screen and (min-width: 641px) and (max-width: 1440px) {
    :root {
        --font-size-xxs: 10px;
        --font-size-xs: clamp(0.625rem, 0.5247rem + 0.2503vw, 0.75rem);
        --font-size-s: clamp(0.625rem, 0.5247rem + 0.2503vw, 0.75rem);
        --font-size-r: clamp(0.8125rem, 0.7624rem + 0.1252vw, 0.875rem);
        --font-size-m: clamp(0.875rem, 0.7747rem + 0.2503vw, 1rem);
        --font-size-l: clamp(1rem, 0.7994rem + 0.5006vw, 1.25rem);
        --font-size-xl: clamp(1.125rem, 0.774rem + 0.8761vw, 1.5625rem);
        --font-size-xxl: clamp(1.5625rem, 1.5625rem + 0vw, 1.5625rem);
    }
}

/* standard font colours */
.color-ui-1 {
    color: var(--color-ui-1);
}
.color-ui-50 {
    color: var(--color-ui-50);
}
.color-ui-100 {
    color: var(--color-ui-100);
}
.color-ui-200 {
    color: var(--color-ui-200);
}
.color-ui-300 {
    color: var(--color-ui-300);
}
.color-ui-400 {
    color: var(--color-ui-400);
}
.color-ui-500 {
    color: var(--color-ui-500);
}
.color-ui-600 {
    color: var(--color-ui-600);
}
.color-ui-700 {
    color: var(--color-ui-700);
}
.color-ui-800 {
    color: var(--color-ui-800);
}
.color-ui-900 {
    color: var(--color-ui-900);
}
.color-ui-950,
.color-ui-950 p {
    color: var(--color-ui-950);
}
.color-ui-1000 {
    color: var(--color-ui-1000);
}

.error-standard,
.colour-red,
.theme a.colour-red {
    color: var(--color-error-700);
}

/* font weights */
[class*="light-"] {
    font-weight: var(--font-weight-light);
}
[class*="regular-"] {
    font-weight: var(--font-weight-regular);
}
[class*="medium-"] {
    font-weight: var(--font-weight-medium);
}
[class*="semiBold-"],
[class*="semiBold-"] p {
    font-weight: var(--font-weight-semiBold);
}
[class*="bold-"] {
    font-weight: var(--font-weight-bold);
}
[class*="extra-bold-"] {
    font-weight: var(--font-weight-extra-bold);
}

/* font-sizings   */

.light-xxxl,
.regular-xxxl,
.medium-xxxl,
.semiBold-xxxl,
.bold-xxxl,
.extra-bold-xxxl {
    font-size: var(--font-size-xxxl);
}
.light-xxl,
.regular-xxl,
.medium-xxl,
.semiBold-xxl,
.bold-xxl,
.extra-bold-xxl {
    font-size: var(--font-size-xxl);
}
.light-xl,
.regular-xl,
.medium-xl,
.semiBold-xl,
.bold-xl,
.extra-bold-xl {
    font-size: var(--font-size-xl);
}
.light-l,
.regular-l,
.medium-l,
.semiBold-l,
.bold-l,
.extra-bold-l {
    font-size: var(--font-size-l);
}
.light-m,
.regular-m,
.medium-m,
.semiBold-m,
.bold-m,
.extra-bold-m {
    font-size: var(--font-size-m);
}
.light-r,
.light-r p,
.regular-r,
.regular-r p,
.medium-r,
.medium-r p,
.semiBold-r,
.semiBold-r p,
.bold-r,
.extra-bold-r {
    font-size: var(--font-size-r);
}
.light-s,
.regular-s,
.medium-s,
.semiBold-s,
.bold-s,
.extra-bold-s {
    font-size: var(--font-size-s);
}
.light-xs,
.regular-xs,
.medium-xs,
.semiBold-xs,
.bold-xs,
.extra-bold-xs {
    font-size: var(--font-size-xs);
}
.light-xxs,
.bold-xxs,
.regular-xxs {
    font-size: var(--font-size-xxs);
    letter-spacing: 0.0025em;
}
.extra-bold-xxxl {
    letter-spacing: -0.025em;
}

.txt-color-1,
.txt-color-white {
    color: var(--color-ui-1);
}
.txt-color-50 {
    color: var(--color-ui-50);
}
.txt-color-100,
.txt-color-ultra-light {
    color: var(--color-ui-100);
}
.txt-color-200 {
    color: var(--color-ui-200);
}
.txt-color-300,
.txt-color-light {
    color: var(--color-ui-300);
}
.txt-color-400 {
    color: var(--color-ui-400);
}
.txt-color-500,
.txt-color-regular,
a.txt-color-regular {
    color: var(--color-ui-500);
}
.txt-color-600 {
    color: var(--color-ui-600);
}
.txt-color-700 {
    color: var(--color-ui-700);
}
.txt-color-800 {
    color: var(--color-ui-800);
}
.txt-color-900 {
    color: var(--color-ui-900);
}
.txt-color-950,
.txt-color-dark {
    color: var(--color-ui-950);
}
.txt-color-1000 {
    color: var(--color-ui-1000);
}

/* text colours */

.txt-error {
    color: var(--color-error-700);
}

/* font-styling
 -----------------------------------------*/
.lowercase {
    text-transform: lowercase;
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.capitalize-first:first-letter {
    text-transform: capitalize;
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.italic {
    font-style: italic;
}

/* Alignment Classes */
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.float-none {
    float: none;
}
.float-left {
    float: left;
}
.clear-left {
    clear: left;
}

.line-height-1 {
    line-height: 1em;
}
