:root {
    --brand-gray: #3e3e3d;
    --brand-gray-warm: #796e65;
    --brand-green: #698c75;
    --brand-red: #9e0c20;
    
    --brand-gray-dark: #515659;
    --brand-gray-light: #D9D9D6;
    --brand-yellow: #D2DE32;
    --color-black-soft: #0D0D0D;
    --color-gray-deep: #222222;
    /*--gray-green: #4E6651;*/
    --color-gray-green: #778C7d; /*rgba(115,142,124,0.90);*/
    --color-gray-green: var(--brand-gray-warm);
    --color-gray-green-light: #869484;
    --color-white-soft: #fdfdfd;
    
    @supports (color: oklch(0 0 0)) {
        --brand-gray: oklch(0.3635 0.0017 106.48);
        --brand-gray-warm: oklch(0.5457 0.0195 61.71);
        --brand-green: oklch(0.6068 0.0525 155.73);
        --brand-red: oklch(0.4457 0.1736 23.26);
        
        --color-white-soft: oklch(0.994 0 0);
    }    

    --color-accent: var(--brand-gray-warm);
    --color-accent-dark: oklch(from var(--brand-gray-warm) calc(l - 0.08) c h);
    --color-accent-primary: var(--brand-red);
    --color-accent-special: var(--color-accent-primary);

    --color-background: var(--white-soft);
    --color-text: oklch(from var(--brand-gray) calc(l + 0) c h);

    --color-nav-link: #444;
    --color-nav-link-hover: var(--color-accent-primary);

    
    --breakpoint: 0;
    --layout-width: 94rem; /* 320 x 256 / 1440 */
    --layout-padding-y: 32px;
    --layout-padding-x: clamp(20px, 5vw, 48px);
    --layout-padding: var(--layout-padding-y) var(--layout-padding-x);
    --layout-column-gap: 24px;
    --layout-row-gap: 24px;

    --rem-base: 16;
    --vw-min: 360;
    --vw-max: 1440;
    --tsa: 1.25;
    --tsd: calc(1 / var(--tsa));
    --text-min: 18;
    --text-max: 21;
    --text-slope: calc((var(--text-max) - var(--text-min)) / (var(--vw-max) - var(--vw-min)));
    --text-offset: calc(var(--text-min) - var(--text-slope) * var(--vw-min));
    --text-base: clamp(
        calc(var(--text-min) / var(--rem-base) * 1rem),
        calc(var(--text-offset) / var(--rem-base) * 1rem + var(--text-slope) * 100vw),
        calc(var(--text-max) / var(--rem-base) * 1rem)
    );
    --title-min: 25;
    --title-max: 50;
    --title-slope: calc((var(--title-max) - var(--title-min)) / (var(--vw-max) - var(--vw-min)));
    --title-offset: calc(var(--title-min) - var(--title-slope) * var(--vw-min));
    --title-base: clamp(
        calc(var(--title-min) / var(--rem-base) * 1rem),
        calc(var(--title-offset) / var(--rem-base) * 1rem + var(--title-slope) * 100vw),
        calc(var(--title-max) / var(--rem-base) * 1rem)
    );
    --display-min: 38;
    --display-max: 60;
    --display-slope: calc((var(--display-max) - var(--display-min)) / (var(--vw-max) - var(--vw-min)));
    --display-offset: calc(var(--display-min) - var(--display-slope) * var(--vw-min));
    --display-base: clamp(
        calc(var(--display-min) / var(--rem-base) * 1rem),
        calc(var(--display-offset) / var(--rem-base) * 1rem + var(--display-slope) * 100vw),
        calc(var(--display-max) / var(--rem-base) * 1rem)
    );
    
    --font-size-100: calc(var(--font-size-200) * var(--tsd));
    --font-size-200: calc(var(--font-size-300) * var(--tsd));
    --font-size-300: var(--text-base);
    --font-size-400: calc(var(--font-size-300) * var(--tsa));
    --font-size-500: calc(var(--font-size-400) * var(--tsa));
    --font-size-600: var(--title-base);
    --font-size-700: calc(var(--font-size-600) * var(--tsa));
    --font-size-800: calc(var(--font-size-700) * var(--tsa));
    --font-size-900: var(--display-base);
    --font-size-1000: calc(var(--font-size-900) * var(--tsa));
    
    --font-family: 'Outfit', system-ui, Helvetica, Arial, sans-serif;
    --font-style: normal;
    --font-weight: 300;
    --font-size: var(--text-base);
    --line-height: 1.4;
    --letter-spacing: 0;
    --word-spacing: 0;
    --hyphens: manual;
    --overflow-wrap: normal;

    --font-family-title: 'Outfit';
    --font-family-subtitle: var(--font-family-title);
    --font-family-supertitle: var(--font-family-title);
    --font-family-label: var(--font-family-title);

}



:root {
    --body-bg-color: var(--color-white-soft);
    --nav-link-font-weight: 400;
    --nav-link-font-size: var(--text-base);
    --nav-link: #444;
    --nav-link-hover: var(--color-accent-primary);

    --border-color: #E0E0E0; /* FB #E0E0E0 */
    --border-radius: 4px;
}


@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth;
  }
}

/* Outfit */
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100;
  src: url('../font/outfit/outfit-v15-latin-100.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200;
  src: url('../font/outfit/outfit-v15-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: url('../font/outfit/outfit-v15-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../font/outfit/outfit-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('../font/outfit/outfit-v15-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('../font/outfit/outfit-v15-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../font/outfit/outfit-v15-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('../font/outfit/outfit-v15-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  src: url('../font/outfit/outfit-v15-latin-900.woff2') format('woff2');
}