/* =========================================================================
   GOSPOCCHIS — Colors & Type Foundations
   Editorial chiaroscuro. Razor precision. Sparse red.
   ========================================================================= */

/* -------------------------------------------------------------------------
   WEB FONTS
   Primary face: "GospocchisSans" — substituted with Archivo (Google Fonts),
   a compact, engineering-precise sans with a 500 default weight that
   closely tracks the proportions described for FerrariSans.
   Label face: "GospocchisLabel" — substituted with Archivo Narrow for the
   uppercase 1px-tracked editorial labels.
   FLAG: Real GospocchisSans / Body-Font files should replace these.
   ------------------------------------------------------------------------- */
/* Google Fonts moved from @import to explicit <link> tags in each page head
   for better render performance (no CSS-parse blocking on network round-trip). */

:root {
  /* ---------- BRAND / ACCENT ---------------------------------------- */
  --g-red:                 #DA291C;   /* Rosso — primary CTA / brand */
  --g-red-90:              #B01E0A;   /* Hover / pressed */
  --g-red-80:              #9D2211;   /* Active / deepest emphasis */

  /* ---------- YELLOWS (heritage / motorsport only) ----------------- */
  --g-yellow-racing:       #FFF200;
  --g-yellow-modena:       #F6E500;

  /* ---------- SURFACE ---------------------------------------------- */
  --g-black:               #0a0807;   /* Warmed near-black — hero voids */
  --g-surface-dark:        #303030;   /* Secondary dark surface */
  --g-surface-light:       #D2D2D2;   /* Light gray surface */
  --g-white:               #FFFFFF;   /* Editorial canvas */
  --g-overlay-dark:        hsla(0, 0%, 7%, 0.8); /* Image / modal overlay */

  /* ---------- TEXT / NEUTRALS -------------------------------------- */
  --g-near-black:          #3e3834;   /* Body on light — warm dark, never pure black */
  --g-gray-60:             #666666;   /* Secondary text */
  --g-gray-55:             #969696;   /* Placeholder / disabled */
  --g-gray-50:             #8F8F8F;   /* Tertiary text / metadata */
  --g-border:              #CCCCCC;   /* Default hairline */

  /* ---------- SEMANTIC --------------------------------------------- */
  --g-warning:             #F13A2C;
  --g-success:             #03904A;
  --g-info:                #4C98B9;
  --g-link-hover:          #3860BE;
  --g-teal-hover:          #1EAEDB;   /* Button hover accent */

  /* ---------- TYPE FACES ------------------------------------------- */
  --g-font-sans: "GospocchisSans", "Archivo", Arial, Helvetica, sans-serif;
  --g-font-label: "GospocchisLabel", "Archivo Narrow", "Archivo", Arial, sans-serif;
  --g-font-system: Arial, Helvetica, sans-serif;

  /* ---------- TYPE SCALE (px + rem reference) ---------------------- */
  --g-fs-section-title: 26px;   /* h2 editorial */
  --g-fs-card-heading:  24px;   /* card title */
  --g-fs-subheading:    18px;   /* bold sub */
  --g-fs-ui-heading:    16px;   /* nav / component */
  --g-fs-body:          16px;
  --g-fs-button:        16px;
  --g-fs-small-button:  14.4px;
  --g-fs-nav:           13px;
  --g-fs-caption:       13px;
  --g-fs-micro-btn:     12px;
  --g-fs-label:         12px;
  --g-fs-micro-label:   11px;

  /* ---------- SPACING (8px base, expanded scale from spec) --------- */
  --g-space-1:  1px;
  --g-space-2:  2px;
  --g-space-4:  4px;
  --g-space-6:  6px;
  --g-space-8:  8px;
  --g-space-10: 10px;
  --g-space-12: 12px;
  --g-space-16: 16px;
  --g-space-20: 20px;
  --g-space-24: 24px;
  --g-space-32: 32px;
  --g-space-40: 40px;
  --g-space-56: 56px;
  --g-space-80: 80px;

  /* ---------- RADII ------------------------------------------------ */
  --g-radius-hairline: 1px;
  --g-radius:          2px;   /* default — razor precision */
  --g-radius-modal:    8px;
  --g-radius-pill:     50%;

  /* ---------- ELEVATION ------------------------------------------- */
  --g-shadow-subtle:   rgb(153, 153, 153) 1px 1px 1px 0px;
  --g-border-hair:     1px solid var(--g-border);
}

/* =========================================================================
   BASE RESET / DOCUMENT
   ========================================================================= */
html, body {
  margin: 0;
  padding: 0;
  background: var(--g-white);
  color: var(--g-near-black);
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--g-red); color: var(--g-white); }

/* =========================================================================
   SEMANTIC TYPE
   ========================================================================= */
h1, .g-h1 {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-section-title);
  font-weight: 500;
  line-height: 1.20;
  letter-spacing: normal;
  margin: 0;
}

h2, .g-h2 {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-card-heading);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}

h3, .g-h3 {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-subheading);
  font-weight: 700;
  line-height: 1.20;
  margin: 0;
}

h4, .g-h4 {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-ui-heading);
  font-weight: 500;
  line-height: 1.40;
  letter-spacing: 0.08px;
  margin: 0;
}

p, .g-body {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--g-near-black);
  margin: 0;
}

strong, .g-body-bold {
  font-weight: 700;
  line-height: 1.30;
}

.g-caption {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-caption);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.195px;
  color: var(--g-gray-50);
}

/* Editorial uppercase label — Body-Font equivalent */
.g-label {
  font-family: var(--g-font-label);
  font-size: var(--g-fs-label);
  font-weight: 400;
  line-height: 1.27;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--g-gray-50);
}

.g-label--micro {
  font-family: var(--g-font-label);
  font-size: var(--g-fs-micro-label);
  font-weight: 400;
  line-height: 1.27;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--g-gray-50);
}

.g-nav-link {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-nav);
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: 0.13px;
  color: var(--g-white);
  text-decoration: none;
}

/* =========================================================================
   LINKS
   ========================================================================= */
a { color: var(--g-near-black); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--g-link-hover); }

.g-on-dark { color: var(--g-white); }
.g-on-dark a { color: var(--g-white); text-decoration: underline; }
.g-on-dark a:hover { color: var(--g-link-hover); text-decoration: none; }