/* ============================================================
   FONTS
   ============================================================ */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/dm-sans-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-serif-display-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-serif-display-italic.woff2') format('woff2');
}

/* ============================================================
   ROOT VARIABLES
   ============================================================ */

:root {
    --color-primary:     #0a2342;
    --color-primary-rgb: 10, 35, 66;
    --color-accent:      #af9af4;
    --color-accent-rgb:  175, 154, 244;
    --color-accent-dark:     #402e7a;
    --color-accent-dark-rgb: 64, 46, 122;
    --color-support:     #ebe7fc;
    --color-support-rgb: 235, 231, 252;
    --color-text:        #555555;
    --color-text-rgb:    51, 51, 51;
    --color-gray:        #9E9E9E;
    --color-gray-rgb:    158, 158, 158;
    --color-gray-light:     #f7f7f7;
    --color-gray-light-rgb: 247, 247, 247;
    --color-dark:        #08122d;
    --color-dark-rgb:    8, 18, 45;
    --color-white:       #ffffff;
    --color-white-rgb:   255, 255, 255;
    --color-danger:      #e53935;
    --color-danger-rgb:  229, 57, 53;
    --color-warning:       #8a6d00;
    --color-warning-light: #fff6d6;
    --color-warning-strong: #f5c518;
    --color-success:     #2e9e5b;
    --color-success-rgb: 46, 158, 91;
    --color-success-light: #e3f5ea;
    --color-success-dark:  #1f6e40;
    --color-success-soft:  #a3d9b8;

    --radius:           2px;
    --btn-speed:        0.45s; /* velocità dell'hover di tutti i pulsanti */

    --font-sans:        'DM Sans', sans-serif;
    --font-serif:       'DM Serif Display', serif;

    --size-body:        1rem;
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: normal;
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.4;
}

h1 { font-size: 2.5rem;  font-weight: normal; line-height: 1.15; }
h2 { font-size: 2rem;    font-weight: normal; line-height: 1.2;  }
h3 { font-size: 1.5rem;  font-weight: normal; line-height: 1.28; }
h4 { font-size: 1.25rem; font-weight: normal; line-height: 1.3;  }
h5 { font-size: 1rem;    font-weight: normal; line-height: 1.35; }
h6 { font-size: 0.875rem;font-weight: normal; line-height: 1.4;  }
p, li, a, label, button,
input, select, textarea, span { font-size: var(--size-body); font-weight: normal; }
small { font-size: 0.875rem; }
p
{
    color: var(--color-text);
}
/* ============================================================
   ICONS (lucide svg)
   ============================================================ */

.icons
{
    width: 20px;
  height: 20px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   FONT UTILITIES
   ============================================================ */

.font-serif {
    font-family: var(--font-serif) !important;
}
.font-sans  {
    font-family: var(--font-sans) !important;
}
.font-serif-bold {
    font-family: var(--font-serif) !important;
    font-weight: 700 !important;
}
.font-sans-bold {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
}

/* ============================================================
   COLOR UTILITIES
   ============================================================ */

.color-pr   {
    color: var(--color-primary) !important;
}
.color-ac   {
    color: var(--color-accent) !important;
}
.color-su   {
    color: var(--color-support) !important;
}
.color-tx   {
    color: var(--color-text) !important;
}
.color-gray {
    color: var(--color-gray) !important;
}
.color-white {
    color: var(--color-white) !important;
}
.color-danger {
    color: var(--color-danger) !important;
}

/* ============================================================
   BACKGROUND UTILITIES
   ============================================================ */

.bg-color-pr   {
    background-color: var(--color-primary) !important;
}
.bg-color-ac   {
    background-color: var(--color-accent) !important;
}
.bg-color-su   {
    background-color: var(--color-support) !important;
}
.bg-color-tx   {
    background-color: var(--color-text) !important;
}
.bg-color-gray {
    background-color: var(--color-gray) !important;
}
.bg-color-gray-light {
    background-color: var(--color-gray-light) !important;
}
.bg-color-white {
    background-color: var(--color-white) !important;
}
.bg-danger {
    background-color: var(--color-danger) !important;
}

/* ============================================================
   BORDER RADIUS
   ============================================================ */

.border-radius
{
    border-radius: var(--radius);
}
.box-shadow
{
    box-shadow: 0 0 6px rgba(var(--color-dark-rgb), 0.25);
}

.box-shadow-light
{
    box-shadow: 0 0 5px rgba(var(--color-dark-rgb), 0.1);
}

/* ============================================================
   BREAKPOINTS
   576px  → sm
   768px  → md
   1024px → lg
   1420px → ut
   1720px → sp
   ============================================================ */

@media (min-width: 576px)
{
    h1 { font-size: 2.75rem;  line-height: 1.13; }
    h2 { font-size: 2.25rem;  line-height: 1.18; }
    h3 { font-size: 1.75rem;  line-height: 1.25; }
    h4 { font-size: 1.5rem;   line-height: 1.28; }
    h5 { font-size: 1.25rem;  line-height: 1.33; }
    h6 { font-size: 1rem;     line-height: 1.38; }
    :root { --size-body: 1rem; }
    small { font-size: 0.875rem; }
    .icons { width: 18px; height: 18px; }
}

@media (min-width: 768px)
{
    h1 { font-size: 3rem;     line-height: 1.1;  }
    h2 { font-size: 2.5rem;   line-height: 1.15; }
    h3 { font-size: 2rem;     line-height: 1.22; }
    h4 { font-size: 1.75rem;  line-height: 1.25; }
    h5 { font-size: 1.5rem;   line-height: 1.3;  }
    h6 { font-size: 1.25rem;  line-height: 1.35; }
    :root { --size-body: 1.0625rem; }
    small { font-size: 0.9375rem; }
    .icons { width: 20px; height: 20px; }

    .border-radius
    {
        border-radius: 4px;
    }
}

@media (min-width: 1024px)
{
    h1 { font-size: 3.25rem;  line-height: 1.08; }
    h2 { font-size: 2.75rem;  line-height: 1.12; }
    h3 { font-size: 2.25rem;  line-height: 1.2;  }
    h4 { font-size: 2rem;     line-height: 1.22; }
    h5 { font-size: 1.75rem;  line-height: 1.27; }
    h6 { font-size: 1.5rem;   line-height: 1.32; }
    :root { --size-body: 1.125rem; }
    small { font-size: 1rem; }
    .icons { width: 22px; height: 22px; }
}

@media (min-width: 1420px)
{
    h1 { font-size: 3.5rem;   line-height: 1.07; }
    h2 { font-size: 3rem;     line-height: 1.1;  }
    h3 { font-size: 2.5rem;   line-height: 1.17; }
    h4 { font-size: 2.25rem;  line-height: 1.2;  }
    h5 { font-size: 2rem;     line-height: 1.25; }
    h6 { font-size: 1.75rem;  line-height: 1.3;  }
    :root { --size-body: 1.1rem; }
    small { font-size: 1.0625rem; }
    .icons { width: 24px; height: 24px; }

    .border-radius
    {
        border-radius: 3px;
    }
}

@media (min-width: 1720px)
{
    h1 { font-size: 3.75rem;  line-height: 1.05; }
    h2 { font-size: 3.25rem;  line-height: 1.08; }
    h3 { font-size: 2.75rem;  line-height: 1.15; }
    h4 { font-size: 2.5rem;   line-height: 1.17; }
    h5 { font-size: 2.25rem;  line-height: 1.22; }
    h6 { font-size: 2rem;     line-height: 1.27; }
    :root { --size-body: 1.15rem; }
    small { font-size: 1.125rem; }
    .icons { width: 26px; height: 26px; }

    .border-radius
    {
        border-radius: 4px;
    }
}