/* =========================================================
   Ferrari Design System — Tokens
   "Cinematic editorial luxury — sparse Rosso Corsa,
    near-black canvas, full-bleed photography."
   ========================================================= */

/* ---- Font face (FerrariSans is licensed; Inter @ 500 is the
        documented open-source substitute) ------------------ */
@font-face {
  font-family: "FerrariSans";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "FerrariSans";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "FerrariSans";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "FerrariSans";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---------- Color: brand & accent ---------- */
  --color-primary:        #da291c;   /* Rosso Corsa */
  --color-primary-active: #b01e0a;
  --color-primary-hover:  #9d2211;
  --color-accent-yellow-hypersail: #fff200;
  --color-accent-yellow:  #f6e500;

  /* ---------- Color: surface ---------- */
  --color-canvas:               #181818;  /* near-black, never #000 */
  --color-canvas-elevated:      #303030;
  --color-canvas-light:         #ffffff;
  --color-surface-card:         #303030;
  --color-surface-soft-light:   #f7f7f7;
  --color-surface-strong-light: #ebebeb;

  /* ---------- Color: hairlines ---------- */
  --color-hairline:          #303030;
  --color-hairline-on-light: #d2d2d2;
  --color-hairline-soft:     #ebebeb;

  /* ---------- Color: text ---------- */
  --color-ink:           #ffffff;
  --color-body:          #969696;
  --color-body-strong:   #ffffff;
  --color-body-on-light: #181818;
  --color-muted:         #666666;
  --color-muted-soft:    #8f8f8f;
  --color-on-primary:    #ffffff;
  --color-on-dark:       #ffffff;
  --color-on-light:      #181818;

  /* ---------- Color: semantic ---------- */
  --color-info:    #4c98b9;
  --color-success: #03904a;
  --color-warning: #f13a2c;

  /* ---------- Decorative gradients ---------- */
  --gradient-rosso:    linear-gradient(180deg, #a00c01, #da291c 64%);
  --gradient-darkroom: linear-gradient(180deg, #3c3c3c, #030303 64%);

  /* ---------- Type ---------- */
  --font-sans: "FerrariSans", -apple-system, system-ui, "Inter", sans-serif;

  /* Display */
  --type-display-mega-size: 80px;
  --type-display-mega-weight: 500;
  --type-display-mega-lh: 1.05;
  --type-display-mega-tracking: -1.6px;

  --type-display-xl-size: 56px;
  --type-display-xl-weight: 500;
  --type-display-xl-lh: 1.1;
  --type-display-xl-tracking: -1.12px;

  --type-display-lg-size: 36px;
  --type-display-lg-weight: 500;
  --type-display-lg-lh: 1.2;
  --type-display-lg-tracking: -0.36px;

  --type-display-md-size: 26px;
  --type-display-md-weight: 500;
  --type-display-md-lh: 1.5;
  --type-display-md-tracking: 0.195px;

  /* Title */
  --type-title-md-size: 18px;
  --type-title-md-weight: 700;
  --type-title-md-lh: 1.2;

  --type-title-sm-size: 16px;
  --type-title-sm-weight: 500;
  --type-title-sm-lh: 1.4;
  --type-title-sm-tracking: 0.08px;

  /* Body */
  --type-body-md-size: 14px;
  --type-body-md-weight: 400;
  --type-body-md-lh: 1.5;

  --type-body-sm-size: 13px;
  --type-body-sm-weight: 400;
  --type-body-sm-lh: 1.5;

  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-caption-lh: 1.4;

  --type-caption-up-size: 11px;
  --type-caption-up-weight: 600;
  --type-caption-up-lh: 1.4;
  --type-caption-up-tracking: 1.1px;

  /* Action */
  --type-button-size: 14px;
  --type-button-weight: 700;
  --type-button-lh: 1.0;
  --type-button-tracking: 1.4px;

  --type-nav-size: 13px;
  --type-nav-weight: 600;
  --type-nav-lh: 1.4;
  --type-nav-tracking: 0.65px;

  --type-number-size: 80px;
  --type-number-weight: 700;
  --type-number-lh: 1.0;
  --type-number-tracking: -1.6px;

  /* ---------- Spacing — explicit 8px ladder ---------- */
  --space-xxxs: 4px;
  --space-xxs:  8px;
  --space-xs:   16px;
  --space-sm:   24px;
  --space-md:   32px;
  --space-lg:   48px;
  --space-xl:   64px;
  --space-xxl:  96px;
  --space-super: 128px;

  /* ---------- Radius — sharp by default ---------- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-small: 0 4px 8px rgba(0, 0, 0, 0.10);

  /* ---------- Layout ---------- */
  --content-max: 1280px;
  --nav-height: 64px;
}

/* =========================================================
   Base + semantic helpers
   ========================================================= */
html, body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
}

/* Display */
.t-display-mega {
  font: var(--type-display-mega-weight) var(--type-display-mega-size)/var(--type-display-mega-lh) var(--font-sans);
  letter-spacing: var(--type-display-mega-tracking);
}
.t-display-xl {
  font: var(--type-display-xl-weight) var(--type-display-xl-size)/var(--type-display-xl-lh) var(--font-sans);
  letter-spacing: var(--type-display-xl-tracking);
}
.t-display-lg {
  font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-lh) var(--font-sans);
  letter-spacing: var(--type-display-lg-tracking);
}
.t-display-md {
  font: var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-lh) var(--font-sans);
  letter-spacing: var(--type-display-md-tracking);
}

/* Title */
.t-title-md {
  font: var(--type-title-md-weight) var(--type-title-md-size)/var(--type-title-md-lh) var(--font-sans);
}
.t-title-sm {
  font: var(--type-title-sm-weight) var(--type-title-sm-size)/var(--type-title-sm-lh) var(--font-sans);
  letter-spacing: var(--type-title-sm-tracking);
}

/* Body */
.t-body-md {
  font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-lh) var(--font-sans);
}
.t-body-sm {
  font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-lh) var(--font-sans);
}
.t-caption {
  font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-lh) var(--font-sans);
}
.t-caption-up {
  font: var(--type-caption-up-weight) var(--type-caption-up-size)/var(--type-caption-up-lh) var(--font-sans);
  letter-spacing: var(--type-caption-up-tracking);
  text-transform: uppercase;
}

/* Action */
.t-button {
  font: var(--type-button-weight) var(--type-button-size)/var(--type-button-lh) var(--font-sans);
  letter-spacing: var(--type-button-tracking);
  text-transform: uppercase;
}
.t-nav {
  font: var(--type-nav-weight) var(--type-nav-size)/var(--type-nav-lh) var(--font-sans);
  letter-spacing: var(--type-nav-tracking);
  text-transform: uppercase;
}
.t-number {
  font: var(--type-number-weight) var(--type-number-size)/var(--type-number-lh) var(--font-sans);
  letter-spacing: var(--type-number-tracking);
  font-variant-numeric: tabular-nums;
}

/* Convenience semantic mappings */
h1 { font: var(--type-display-mega-weight) var(--type-display-mega-size)/var(--type-display-mega-lh) var(--font-sans); letter-spacing: var(--type-display-mega-tracking); margin: 0; }
h2 { font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-lh) var(--font-sans); letter-spacing: var(--type-display-lg-tracking); margin: 0; }
h3 { font: var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-lh) var(--font-sans); margin: 0; }
h4 { font: var(--type-title-md-weight) var(--type-title-md-size)/var(--type-title-md-lh) var(--font-sans); margin: 0; }
p  { font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-lh) var(--font-sans); margin: 0; }