/**
 * Design System Tokens - Donna Fugata
 * Typography + Colors
 */

:root {
  /* ========================================
     FOUNDATION COLORS
     ======================================== */

  /* Neutrals */
  --neutral-900: #0A0D14;
  --neutral-800: #161922;
  --neutral-700: #20232D;
  --neutral-600: #31353F;
  --neutral-500: #525866;
  --neutral-400: #868C98;
  --neutral-300: #CDD0D5;
  --neutral-200: #E2E4E9;
  --neutral-100: #F6F8FA;
  --neutral-0: #ffffff;

  /* Brand Colors */
  --color-primary: #397EFE;
  --color-green: #34A665;
  --color-orange: #FF6929;
  --color-yellow: #F1A900;
  --color-pink: #F8AAC9;

  /* ========================================
     SEMANTIC TOKENS - BACKGROUND
     ======================================== */

  --bg-strong-900: var(--neutral-900);
  --bg-surface-700: var(--neutral-700);
  --bg-soft-200: var(--neutral-200);
  --bg-weak-100: var(--neutral-100);
  --bg-white-0: var(--neutral-0);

  /* ========================================
     SEMANTIC TOKENS - TEXT
     ======================================== */

  --text-main-900: var(--neutral-900);
  --text-sub-500: var(--neutral-500);
  --text-soft-400: var(--neutral-400);
  --text-disabled-300: var(--neutral-300);
  --text-white-0: var(--neutral-0);

  /* ========================================
     SEMANTIC TOKENS - STROKE
     ======================================== */

  --stroke-strong-900: var(--neutral-900);
  --stroke-sub-300: var(--neutral-300);
  --stroke-soft-200: var(--neutral-200);
  --stroke-white-0: var(--neutral-0);

  /* ========================================
     TYPOGRAPHY - FONT FAMILY
     ======================================== */

  --font-primary: "futura-pt", sans-serif;
  --font-secondary: "Merriweather", Georgia, serif;

  /* ========================================
     TYPOGRAPHY - FONT SIZES (Mobile First)
     ======================================== */

  /* Display */
  --display-large: 64px;
  --display-large-lh: 0.85;
  --display-large-ls: -0.05em;

  --display-medium: 56px;
  --display-medium-lh: 0.90;
  --display-medium-ls: -0.03em;

  /* Title UPPERCASE (Mobile) */
  --title-xlarge: 48px;
  --title-xlarge-lh: 0.90;
  --title-xlarge-ls: -0.03em;

  --title-large: 42px;
  --title-large-lh: 1;
  --title-large-ls: 0;

  --title-medium: 32px;
  --title-medium-lh: 1.20;
  --title-medium-ls: -0.01em;

  --title-small: 24px;
  --title-small-lh: 1.30;
  --title-small-ls: 0;
  --title-small-weight: 450;

  --title-xsmall: 20px;
  --title-xsmall-lh: 1.30;
  --title-xsmall-ls: 0;
  --title-xsmall-weight: 450;

  /* Title LOWERCASE (Mobile) */
  --title-xlarge-lc: 40px;
  --title-xlarge-lc-lh: 1.20;
  --title-xlarge-lc-ls: -0.01em;

  --title-large-lc: 36px;
  --title-large-lc-lh: 1.20;
  --title-large-lc-ls: -0.01em;

  --title-medium-lc: 32px;
  --title-medium-lc-lh: 1.20;
  --title-medium-lc-ls: -0.01em;

  --title-small-lc: 24px;
  --title-small-lc-lh: 1.30;
  --title-small-lc-ls: 0;
  --title-small-lc-weight: 450;

  --title-xsmall-lc: 20px;
  --title-xsmall-lc-lh: 1.30;
  --title-xsmall-lc-ls: 0;
  --title-xsmall-lc-weight: 450;

  /* Label */
  --label-xlarge: 20px;
  --label-xlarge-lh: 1.6;
  --label-xlarge-ls: -0.015em;

  --label-large: 18px;
  --label-large-lh: 1.33;
  --label-large-ls: 0;

  --label-medium: 16px;
  --label-medium-lh: 1.5;
  --label-medium-ls: 0;

  --label-small: 14px;
  --label-small-lh: 1.43;
  --label-small-ls: 0;

  --label-xsmall: 12px;
  --label-xsmall-lh: 1.33;
  --label-xsmall-ls: 0;

  /* Paragraph (Merriweather) */
  --paragraph-xlarge: 20px;
  --paragraph-xlarge-lh: 1.6;
  --paragraph-xlarge-ls: -0.015em;

  --paragraph-large: 18px;
  --paragraph-large-lh: 1.33;
  --paragraph-large-ls: -0.015em;

  --paragraph-medium: 16px;
  --paragraph-medium-lh: 1.6;
  --paragraph-medium-ls: -0.011em;

  --paragraph-small: 14px;
  --paragraph-small-lh: 1.43;
  --paragraph-small-ls: -0.006em;

  --paragraph-xsmall: 12px;
  --paragraph-xsmall-lh: 1.33;
  --paragraph-xsmall-ls: 0;

  /* Capital (Futura PT uppercase) */
  --capital-large: 16px;
  --capital-large-lh: 1.5;
  --capital-large-ls: 0.04em;

  --capital-medium: 14px;
  --capital-medium-lh: 1.43;
  --capital-medium-ls: 0.04em;

  --capital-small: 12px;
  --capital-small-lh: 1.33;
  --capital-small-ls: 0.04em;
  --capital-small-weight: 450;

  --capital-xsmall: 11px;
  --capital-xsmall-lh: 1.09;
  --capital-xsmall-ls: 0.02em;
  --capital-xsmall-weight: 450;

  /* ========================================
     TYPOGRAPHY - LINE HEIGHTS
     ======================================== */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ========================================
     TYPOGRAPHY - FONT WEIGHTS
     ======================================== */

  --weight-regular: 400;
  --weight-book: 450;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ========================================
     TYPOGRAPHY - LETTER SPACING
     ======================================== */

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
}

/* ========================================
   DESKTOP TYPOGRAPHY SIZES
   ======================================== */

@media (min-width: 768px) {
  :root {
    /* Display */
    --display-large: 120px;
    --display-medium: 80px;

    /* Title UPPERCASE (Desktop) */
    --title-xlarge: 64px;
    --title-xlarge-lh: 1;

    --title-large: 56px;
    --title-large-lh: 1;
    --title-large-ls: -0.03em;

    --title-medium: 40px;

    --title-small: 32px;
    --title-small-lh: 1.15;
    --title-small-weight: 400;

    --title-xsmall: 24px;

    /* Title LOWERCASE (Desktop) */
    --title-xlarge-lc: 56px;
    --title-xlarge-lc-lh: 1.10;
    --title-xlarge-lc-ls: 0;

    --title-large-lc: 48px;

    --title-medium-lc: 38px;
    --title-medium-lc-lh: 1.05;

    --title-small-lc: 32px;
    --title-small-lc-weight: 400;

    --title-xsmall-lc: 24px;
    --title-xsmall-lc-lh: 1.15;
    --title-xsmall-lc-weight: 400;
  }
}

/* ========================================
   TYPOGRAPHY CLASSES - DISPLAY
   ======================================== */

.display-large {
  font-family: var(--font-primary);
  font-size: var(--display-large);
  font-weight: var(--weight-regular);
  line-height: var(--display-large-lh);
  letter-spacing: var(--display-large-ls);
  text-transform: uppercase;
}

.display-medium {
  font-family: var(--font-primary);
  font-size: var(--display-medium);
  font-weight: var(--weight-regular);
  line-height: var(--display-medium-lh);
  letter-spacing: var(--display-medium-ls);
  text-transform: uppercase;
}

/* ========================================
   TYPOGRAPHY CLASSES - TITLE UPPERCASE
   ======================================== */

.title-xlarge {
  font-family: var(--font-primary);
  font-size: var(--title-xlarge);
  font-weight: var(--weight-regular);
  line-height: var(--title-xlarge-lh);
  letter-spacing: var(--title-xlarge-ls);
  text-transform: uppercase;
}

.title-large {
  font-family: var(--font-primary);
  font-size: var(--title-large);
  font-weight: var(--weight-regular);
  line-height: var(--title-large-lh);
  letter-spacing: var(--title-large-ls);
  text-transform: uppercase;
}

.title-medium {
  font-family: var(--font-primary);
  font-size: var(--title-medium);
  font-weight: var(--weight-regular);
  line-height: var(--title-medium-lh);
  letter-spacing: var(--title-medium-ls);
  text-transform: uppercase;
}

.title-small {
  font-family: var(--font-primary);
  font-size: var(--title-small);
  font-weight: var(--title-small-weight);
  line-height: var(--title-small-lh);
  letter-spacing: var(--title-small-ls);
  text-transform: uppercase;
}

.title-xsmall {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall);
  font-weight: var(--title-xsmall-weight);
  line-height: var(--title-xsmall-lh);
  letter-spacing: var(--title-xsmall-ls);
  text-transform: uppercase;
}

/* ========================================
   TYPOGRAPHY CLASSES - TITLE LOWERCASE
   ======================================== */

.title-xlarge-lc {
  font-family: var(--font-primary);
  font-size: var(--title-xlarge-lc);
  font-weight: var(--weight-regular);
  line-height: var(--title-xlarge-lc-lh);
  letter-spacing: var(--title-xlarge-lc-ls);
  text-transform: none;
}

.title-large-lc {
  font-family: var(--font-primary);
  font-size: var(--title-large-lc);
  font-weight: var(--weight-regular);
  line-height: var(--title-large-lc-lh);
  letter-spacing: var(--title-large-lc-ls);
  text-transform: none;
}

.title-medium-lc {
  font-family: var(--font-primary);
  font-size: var(--title-medium-lc);
  font-weight: var(--weight-regular);
  line-height: var(--title-medium-lc-lh);
  letter-spacing: var(--title-medium-lc-ls);
  text-transform: none;
}

.title-small-lc {
  font-family: var(--font-primary);
  font-size: var(--title-small-lc);
  font-weight: var(--title-small-lc-weight);
  line-height: var(--title-small-lc-lh);
  letter-spacing: var(--title-small-lc-ls);
  text-transform: none;
}

.title-xsmall-lc {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall-lc);
  font-weight: var(--title-xsmall-lc-weight);
  line-height: var(--title-xsmall-lc-lh);
  letter-spacing: var(--title-xsmall-lc-ls);
  text-transform: none;
}

/* ========================================
   TYPOGRAPHY CLASSES - LABEL
   ======================================== */

.label-xlarge {
  font-family: var(--font-primary);
  font-size: var(--label-xlarge);
  font-weight: var(--weight-book);
  line-height: var(--label-xlarge-lh);
  letter-spacing: var(--label-xlarge-ls);
  text-transform: none;
}

.label-large {
  font-family: var(--font-primary);
  font-size: var(--label-large);
  font-weight: var(--weight-book);
  line-height: var(--label-large-lh);
  letter-spacing: var(--label-large-ls);
  text-transform: none;
}

.label-medium {
  font-family: var(--font-primary);
  font-size: var(--label-medium);
  font-weight: var(--weight-book);
  line-height: var(--label-medium-lh);
  letter-spacing: var(--label-medium-ls);
  text-transform: none;
}

.label-small {
  font-family: var(--font-primary);
  font-size: var(--label-small);
  font-weight: var(--weight-book);
  line-height: var(--label-small-lh);
  letter-spacing: var(--label-small-ls);
  text-transform: none;
}

.label-xsmall {
  font-family: var(--font-primary);
  font-size: var(--label-xsmall);
  font-weight: var(--weight-book);
  line-height: var(--label-xsmall-lh);
  letter-spacing: var(--label-xsmall-ls);
  text-transform: none;
}

/* ========================================
   TYPOGRAPHY CLASSES - PARAGRAPH
   ======================================== */

.paragraph-xlarge {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-xlarge);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-xlarge-lh);
  letter-spacing: var(--paragraph-xlarge-ls);
  text-transform: none;
}

.paragraph-large {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-large);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-large-lh);
  letter-spacing: var(--paragraph-large-ls);
  text-transform: none;
}

.paragraph-medium {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-medium);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-medium-lh);
  letter-spacing: var(--paragraph-medium-ls);
  text-transform: none;
}

.paragraph-small {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-small);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-small-lh);
  letter-spacing: var(--paragraph-small-ls);
  text-transform: none;
}

.paragraph-xsmall {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-xsmall);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-xsmall-lh);
  letter-spacing: var(--paragraph-xsmall-ls);
  text-transform: none;
}

/* ========================================
   TYPOGRAPHY CLASSES - CAPITAL
   ======================================== */

.capital-large {
  font-family: var(--font-primary);
  font-size: var(--capital-large);
  font-weight: var(--weight-regular);
  line-height: var(--capital-large-lh);
  letter-spacing: var(--capital-large-ls);
  text-transform: uppercase;
}

.capital-medium {
  font-family: var(--font-primary);
  font-size: var(--capital-medium);
  font-weight: var(--weight-regular);
  line-height: var(--capital-medium-lh);
  letter-spacing: var(--capital-medium-ls);
  text-transform: uppercase;
}

.capital-small {
  font-family: var(--font-primary);
  font-size: var(--capital-small);
  font-weight: var(--capital-small-weight);
  line-height: var(--capital-small-lh);
  letter-spacing: var(--capital-small-ls);
  text-transform: uppercase;
}

.capital-xsmall {
  font-family: var(--font-primary);
  font-size: var(--capital-xsmall);
  font-weight: var(--capital-xsmall-weight);
  line-height: var(--capital-xsmall-lh);
  letter-spacing: var(--capital-xsmall-ls);
  text-transform: uppercase;
}

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

body {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-medium);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-medium-lh);
  letter-spacing: var(--paragraph-medium-ls);
  color: var(--text-main-900);
}

h1 {
  font-family: var(--font-primary);
  font-size: var(--title-xlarge);
  font-weight: var(--weight-regular);
  line-height: var(--title-xlarge-lh);
  letter-spacing: var(--title-xlarge-ls);
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-primary);
  font-size: var(--title-large);
  font-weight: var(--weight-regular);
  line-height: var(--title-large-lh);
  letter-spacing: var(--title-large-ls);
  text-transform: uppercase;
}

h3 {
  font-family: var(--font-primary);
  font-size: var(--title-medium);
  font-weight: var(--weight-regular);
  line-height: var(--title-medium-lh);
  letter-spacing: var(--title-medium-ls);
  text-transform: uppercase;
}

h4 {
  font-family: var(--font-primary);
  font-size: var(--title-small);
  font-weight: var(--title-small-weight);
  line-height: var(--title-small-lh);
  letter-spacing: var(--title-small-ls);
  text-transform: uppercase;
}

h5 {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall);
  font-weight: var(--title-xsmall-weight);
  line-height: var(--title-xsmall-lh);
  letter-spacing: var(--title-xsmall-ls);
  text-transform: uppercase;
}

h6 {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall-lc);
  font-weight: var(--title-xsmall-lc-weight);
  line-height: var(--title-xsmall-lc-lh);
  letter-spacing: var(--title-xsmall-lc-ls);
}

p {
  margin-bottom: 1em;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--label-medium);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: none;
  padding: 0;
}

/* Base - Pieno nero */
.btn.btn--base {
  background-color: var(--bg-strong-900);
  color: var(--text-white-0);
  padding: 16px 32px;
  border-radius: 0;
}

.btn.btn--base:hover {
  background-color: var(--neutral-700);
}

/* Outline - Bordo */
.btn.btn--outline {
  background-color: transparent;
  color: var(--text-main-900);
  padding: 14px 30px;
  border: 2px solid var(--stroke-strong-900);
  border-radius: 0;
}

.btn.btn--outline:hover {
  background-color: var(--bg-strong-900);
  color: var(--text-white-0);
}

/* Link - Testo con underline */
.btn.btn--link {
  background-color: transparent;
  color: var(--text-main-900);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn.btn--link:hover {
  text-decoration-thickness: 2px;
}