/* ============================================================
   HORIZON MUNDI — global.css
   Token, reset, base tipografica, utility
   ============================================================ */

/* ─── 1. Design Tokens ───────────────────────────────────── */
:root {

    /* ── Palette ── */
    --hm-white:     #FFFFFF;
    --hm-platinum:  #E8E8E8;
    --hm-sand:      #C4A882;
    --hm-abyss:     #1A3A3A;
    --hm-bordeaux:  #7D2E3E;
    --hm-gold:      #B8962E;
    --hm-dark:      #2A2A2A;

    /* ── Alias semantici ── */
    --hm-color-bg:         var(--hm-white);
    --hm-color-bg-alt:     var(--hm-platinum);
    --hm-color-text:       var(--hm-dark);
    --hm-color-text-muted: #6B6B6B;
    --hm-color-primary:    var(--hm-abyss);
    --hm-color-accent:     var(--hm-gold);
    --hm-color-cta:        var(--hm-bordeaux);
    --hm-color-highlight:  var(--hm-sand);
    --hm-color-border:     var(--hm-platinum);

    /* ── Gradienti brand ── */
    --hm-gradient-dubai:     linear-gradient(160deg, #1A3A3A 0%, #7D2E3E 100%);
    --hm-gradient-bali:      linear-gradient(160deg, #2A5A5A 0%, #B8962E 100%);
    --hm-gradient-capoverde: linear-gradient(160deg, #C4A882 0%, #1A3A3A 100%);
    --hm-gradient-cover:     linear-gradient(135deg, #1A3A3A 0%, #7D2E3E 100%);

    /* Overlay (opacità per uso su immagini) */
    --hm-overlay-dubai:     linear-gradient(160deg, rgba(26,58,58,.82)  0%, rgba(125,46,62,.82)  100%);
    --hm-overlay-bali:      linear-gradient(160deg, rgba(42,90,90,.82)  0%, rgba(184,150,46,.82) 100%);
    --hm-overlay-capoverde: linear-gradient(160deg, rgba(196,168,130,.75) 0%, rgba(26,58,58,.85) 100%);
    --hm-overlay-londra:    linear-gradient(160deg, rgba(26,58,58,.82)   0%, rgba(44,74,106,.82) 100%);
    --hm-overlay-brasile:   linear-gradient(160deg, rgba(26,58,58,.82)   0%, rgba(42,90,58,.82)  100%);

    /* ── Tipografia ── */
    --hm-font-heading: 'Jost',  sans-serif;
    --hm-font-body:    'Inter', sans-serif;

    /* Scala dimensioni */
    --hm-size-xs:   0.75rem;   /* 12 */
    --hm-size-sm:   0.875rem;  /* 14 */
    --hm-size-base: 1rem;      /* 16 */
    --hm-size-md:   1.125rem;  /* 18 */
    --hm-size-lg:   1.25rem;   /* 20 */
    --hm-size-xl:   1.5rem;    /* 24 */
    --hm-size-2xl:  2rem;      /* 32 */
    --hm-size-3xl:  2.5rem;    /* 40 */
    --hm-size-4xl:  3rem;      /* 48 */
    --hm-size-5xl:  3.75rem;   /* 60 */
    --hm-size-6xl:  4.5rem;    /* 72 */

    /* Pesi */
    --hm-weight-light:    300;
    --hm-weight-regular:  400;
    --hm-weight-medium:   500;
    --hm-weight-semibold: 600;
    --hm-weight-bold:     700;

    /* Interlinea */
    --hm-leading-tight:  1.1;
    --hm-leading-snug:   1.3;
    --hm-leading-normal: 1.65;
    --hm-leading-loose:  1.8;

    /* Spaziatura lettere */
    --hm-tracking-tight:   -0.03em;
    --hm-tracking-normal:   0em;
    --hm-tracking-wide:     0.05em;
    --hm-tracking-wider:    0.1em;
    --hm-tracking-widest:   0.18em;

    /* ── Spaziatura (scala 4px) ── */
    --hm-space-1:   0.25rem;   /*  4 */
    --hm-space-2:   0.5rem;    /*  8 */
    --hm-space-3:   0.75rem;   /* 12 */
    --hm-space-4:   1rem;      /* 16 */
    --hm-space-5:   1.25rem;   /* 20 */
    --hm-space-6:   1.5rem;    /* 24 */
    --hm-space-8:   2rem;      /* 32 */
    --hm-space-10:  2.5rem;    /* 40 */
    --hm-space-12:  3rem;      /* 48 */
    --hm-space-16:  4rem;      /* 64 */
    --hm-space-20:  5rem;      /* 80 */
    --hm-space-24:  6rem;      /* 96 */
    --hm-space-32:  8rem;      /* 128 */

    /* ── Layout ── */
    --hm-container-xl:  1280px;
    --hm-container-2xl: 1440px;
    --hm-container-md:  768px;
    --hm-container-pad: var(--hm-space-8);
    --hm-nav-height:    72px;

    /* ── Motion ── */
    --hm-dur-fast:   150ms;
    --hm-dur-base:   300ms;
    --hm-dur-slow:   500ms;
    --hm-dur-slower: 800ms;
    --hm-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --hm-ease-io:    cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index ── */
    --hm-z-base:    0;
    --hm-z-above:   10;
    --hm-z-overlay: 100;
    --hm-z-nav:     200;
    --hm-z-modal:   300;
    --hm-z-toast:   400;

    /* Zero border-radius by design */
    --hm-radius: 0;
}

/* ─── 2. Reset ───────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--hm-nav-height);
}

body {
    font-family: var(--hm-font-body);
    font-size: var(--hm-size-base);
    font-weight: var(--hm-weight-regular);
    line-height: var(--hm-leading-normal);
    color: var(--hm-color-text);
    background-color: var(--hm-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font: inherit;
    border: none;
    background: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
}

button { cursor: pointer; }
abbr   { text-decoration: none; cursor: help; }

/* ─── 3. Tipografia base ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hm-font-heading);
    font-weight: var(--hm-weight-semibold);
    line-height: var(--hm-leading-tight);
    letter-spacing: var(--hm-tracking-tight);
    color: var(--hm-color-primary);
}

h1 { font-size: var(--hm-size-5xl); font-weight: var(--hm-weight-light); }
h2 { font-size: var(--hm-size-4xl); }
h3 { font-size: var(--hm-size-2xl); font-weight: var(--hm-weight-medium); }
h4 { font-size: var(--hm-size-xl);  font-weight: var(--hm-weight-medium); }

p {
    font-family: var(--hm-font-body);
    line-height: var(--hm-leading-normal);
    color: var(--hm-color-text);
}

/* ─── 4. Utility ─────────────────────────────────────────── */

/* Container */
.hm-container {
    width: 100%;
    max-width: var(--hm-container-xl);
    margin-inline: auto;
    padding-inline: var(--hm-container-pad);
}

/* Label / overline */
.hm-label {
    display: block;
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-xs);
    font-weight: var(--hm-weight-semibold);
    letter-spacing: var(--hm-tracking-widest);
    text-transform: uppercase;
    color: var(--hm-color-accent);
    margin-bottom: var(--hm-space-3);
}

.hm-label--light {
    color: var(--hm-sand);
}

/* Visually hidden */
.hm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ─── 5. Reveal on scroll ────────────────────────────────── */
.hm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity   var(--hm-dur-slow) var(--hm-ease-out),
        transform var(--hm-dur-slow) var(--hm-ease-out);
}

.hm-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hm-reveal--delay-1 { transition-delay:  80ms; }
.hm-reveal--delay-2 { transition-delay: 180ms; }
.hm-reveal--delay-3 { transition-delay: 280ms; }
.hm-reveal--delay-4 { transition-delay: 380ms; }
.hm-reveal--delay-5 { transition-delay: 480ms; }