/* DREIVIRTUELL.CSS                                                 */
/* Base styles containing the dreivirtuell® Corporate Design Rules  */
/* Copyright © 2024, 2025, 2026 by dreivirtuell®                    */
/* Last Update: 2026-07-15                                          */

/* Imports for CI fonts */
@font-face {
  font-family: "Public Sans";
  font-weight: 300;
  src: url(./PublicSans-Light.ttf);
}

@font-face {
  font-family: "Public Sans";
  font-weight: 400;
  src: url(./PublicSans-Medium.ttf);
}

@font-face {
  font-family: "Public Sans";
  font-weight: 500;
  src: url(./PublicSans-Regular.ttf);
}

@font-face {
  font-family: "Public Sans";
  font-weight: 600;
  src: url(./PublicSans-SemiBold.ttf);
}

@font-face {
  font-family: "Roboto";
  font-weight: 300;
  src: url(./Roboto-Light.ttf);
}

@font-face {
  font-family: "Roboto";
  font-weight: 400;
  src: url(./Roboto-Medium.ttf);
}

@font-face {
  font-family: "Roboto";
  font-weight: 500;
  src: url(./Roboto-Regular.ttf);
}

/* Colors and sizes */
:root {
    --bg: #f8f8f8;
    --fg: #222;
    --text: #222;

    /* PRIMARY */
    --ocean-br2: hsl(161, 45%, 78%);
    --ocean-br1: hsl(161, 45%, 58%);
    --ocean:     hsl(161, 45%, 44%);
    --ocean-sh1: hsl(161, 45%, 34%);
    --ocean-sh2: hsl(161, 45%, 27%);
    --ocean-sh3: hsl(161, 45%, 22%);

    /* SECONDARY */
    --granite-br1: hsl(0, 0%, 79%);
    --granite:     hsl(0, 0%, 65%);
    --granite-sh1: hsl(0, 0%, 51%);
    --granite-sh2: hsl(0, 0%, 41%);
    --granite-sh3: hsl(0, 0%, 34%);
    --granite-sh4: hsl(0, 0%, 29%);

    /* ACCENT */
    --orange-br1: hsl(29, 85%, 74%);
    --orange:     hsl(29, 85%, 60%);
    --orange-sh1: hsl(29, 85%, 46%);
    --orange-sh2: hsl(29, 85%, 36%);
    --orange-sh3: hsl(29, 85%, 29%);

    /* TERTIARY */
    --blue-br1: hsl(205, 86%, 72%);
    --blue:     hsl(205, 86%, 58%);
    --blue-sh1: hsl(205, 86%, 48%);
    --blue-sh2: hsl(205, 86%, 41%);

    /* QUARTERNARY */
    --wine-br1: hsl(321, 35%, 61%);
    --wine:     hsl(321, 35%, 47%);
    --wine-sh1: hsl(321, 35%, 37%);
    --wine-sh2: hsl(321, 35%, 30%);

    --lightshade: hsl(0, 0%, 93%);
    --darkshade:  hsl(0, 0%, 83%);
    --greenshade: hsl(161, 45%, 80%);
    --textshadow: rgba(0, 0, 0, 0.2);

    --fasttransition: 0.2s;
    --slowtransition: 0.5s;

    --textsize-h1: 3.33rem;
    --textsize-h2: 2.06rem;
    --textsize-h3: 1.27rem;
    --textsize-h4: 1.00rem;
    --textsize-h5: 0.79rem;
    --textsize-hero: 4.20rem;
    --textsize-small: 0.62rem;

    --d-xxs: 0.24rem;
    --d-xs: 0.38rem;
    --d-s: 0.62rem;
    --d-m: 1.00rem;
    --d-l: 1.62rem;
    --d-xl: 2.62rem;
    --d-xxl: 4.24rem;

    --maxscreen: 1920px;
    --screen-desktop: 1250px;
    --screen-tablet: 768px;
    --screen-mobile: 360px;
}