:root {

    --bg-0: rgb(4, 3, 2);
    --bg-1: rgb(11, 9, 7);
    --bg-2: rgb(20, 17, 14);
    --bg-3: rgb(30, 26, 22);

    --ink: rgb(250, 245, 234);
    --ink-muted: rgb(174, 170, 162);
    --ink-faint: rgb(107, 105, 99);
    --ink-dim: rgb(63, 61, 56);

    --line: rgb(43, 41, 36);
    --line-soft: rgb(28, 26, 23);
    --line-strong: rgb(74, 71, 66);

    --accent: rgb(224, 175, 59);
    --accent-ink: rgb(26, 16, 0);
    --accent-soft: rgb(102, 71, 0);

    --success: rgb(103, 187, 107);
    --danger: rgb(232, 88, 84);

    --serif: 'DM Serif Display', 'Times New Roman', serif;
    --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /*Utility moltocomoda per defire range (20->56px) su un valore dinamico (4vw)*/
    /*https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp*/
    --pad: clamp(20px, 4vw, 56px);
    --gap: 12px;
    --radius: 4px;

    --card-radius: 12px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg-0);
    color: var(--ink);
    font-family: var(--sans), sans-serif;
    font-size: 14px;
    line-height: 1.5;

    min-height: 100vh;
    display: flex;
    flex-direction: column;

    /*Non standard ma utile a smussare i testi */
    /*Se vi interessa: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-smooth*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /*Migliora la leggibilità, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-feature-settings*/
    font-feature-settings: 'ss01', 'cv11';

    /*Migliori spacing, ligature e tc, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-rendering */
    text-rendering: optimizeLegibility;
}

main {
    flex: 1;
}

.wise-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px var(--pad);
}

.wise-page-title {
    font-family: var(--serif), sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
    margin: 0;
}

button {
    font-family: inherit;
    cursor: pointer; /*Importante per settare il classico cursore del bottone*/
}

.wise-mono {
    font-family: var(--mono), monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.wise-clean-link {
    text-decoration: none;
    color: inherit;
}


/*TODO, da valutare se gestire i buttons come components....*/
.wise-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-family: var(--sans), sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all .15s;
    cursor: pointer;
    border: 0;
}

.wise-btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.wise-btn--primary:hover {
    filter: brightness(1.08);
}

.wise-btn--ghost {
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid var(--line);
}

.wise-btn--ghost:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
}

.wise-btn--lg {
    padding: 14px 24px;
    font-size: 14px;
}

.wise-btn--block {
    width: 100%;
    justify-content: center;
}

.w-full {
    width: 100%;
}

.min-w-full {
    min-width: 100%;
}

.wise-tag {
    font-family: var(--mono), monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink-muted);
}

.wise-section {
    padding: 56px var(--pad);
}

.wise-section--underlined {
    padding: 56px var(--pad);
    border-bottom: 1px solid var(--line-soft);
}