/* =============================================================
   QUAKE Design System — Tokens
   Lisbon Earthquake Centre
   ============================================================= */

/* Fonts: Hurme Geometric Sans No. 4 by Typedepot — the official Quake
   typeface. Licensed files live in /fonts/. Mulish is kept as a fallback
   so previews still render before fonts load. */

@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-Hairline.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-HairlineOblique.otf') format('opentype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-Thin.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-ThinOblique.otf') format('opentype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-LightOblique.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-RegularOblique.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-SemiBoldOblique.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-BoldOblique.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-Black.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans 4';
  src: url('fonts/HurmeGeometricSansNoFour-BlackOblique.otf') format('opentype');
  font-weight: 800; font-style: italic; font-display: swap;
}

/* Hurme 1 — lighter alternate cut, used sparingly in mobile banners */
@font-face {
  font-family: 'Hurme Geometric Sans 1';
  src: url('fonts/HurmeGeometricSans1-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Mulish kept as fallback / preview-load substitute */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Color: Brand core ---------- */
  /* Official Quake palette from brand guide (Cores Principais).
     Each color carries its Pantone / CMYK / RAL / 3M Vinyl spec as a
     comment so print and signage designers have everything in one place.
     The palette runs warm-to-cool, mirroring the chromatic gradient in
     the logo: orange → red → pink → purple. */

  /* PRIMARY — Cores Principais */
  --dark-purple:  #640A55;  /* Pantone 2356 C · 60c 100m 30y 30k · RGB 100,10,85   · RAL Purple Violet    · 3M Purple        */
  --mid-purple:   #8C1E78;  /* Pantone 249 C  · 50c 100m 20y 5k  · RGB 140,30,120  · RAL Traffic Purple   · 3M Dark Violet   */
  --pink:         #D2007D;  /* Pantone 226 C  · 15c 100m 15y 0k  · RGB 210,0,125   · RAL Telemagenta      · 3M Vivid Rose    */
  --dark-red:     #B41900;  /* Pantone 2350 C · 10c 100m 100y 20k· RGB 180,25,0    · RAL Traffic Red      · 3M Cardinal Red  */
  --red:          #D71900;  /* Pantone 2347 C · 0c 100m 100y 10k · RGB 215,25,0    · RAL Luminous Red     · 3M Red           */
  --dark-orange:  #FF5A28;  /* Pantone 165 C  · 0c 80m 95y 0k    · RGB 255,90,40   · RAL Luminous Orange  · 3M Bright Orange */
  --orange:       #F58200;  /* Pantone 151 C  · 0c 60m 100y 0k   · RGB 245,130,0   · RAL Yellow Orange    · 3M Light Orange  */

  /* COMPLEMENTARY — Cores Complementares */
  --light-yellow: #FFB400;  /* Pantone 2010 C · 0c 30m 100y 0k   · RGB 255,180,0   · RAL Sun Yellow       · 3M Apricot       */
  --dark-blue:    #320A4B;  /* Pantone 2627 Cv· 86c 100m 25y 45k · RGB 50,10,75    · RAL Design 310 20 30 · 3M Plum Purple   */

  /* Legacy / inferred-from-design alias names (kept for back-compat with
     earlier code) — prefer the named tokens above. */
  --quake-purple-900:   rgb(39, 10, 100);    /* deepest, footer — NOT in brand guide, inferred from Figma */
  --quake-purple-800:   var(--dark-blue);
  --quake-purple-700:   var(--dark-purple);
  --quake-purple-500:   var(--mid-purple);
  --quake-magenta:      var(--pink);
  --quake-red:          var(--red);
  --quake-red-dark:     var(--dark-red);
  --quake-orange:       var(--dark-orange);
  --quake-orange-warm:  var(--orange);
  --quake-yellow:       var(--light-yellow);
  --quake-yellow-soft:  rgb(252, 176, 0);    /* not in brand guide — inferred */
  --quake-yellow-pure:  rgb(255, 242, 0);    /* not in brand guide — inferred */

  /* ---------- Color: Neutrals ---------- */
  --neutral-0:    rgb(255, 255, 255);
  --neutral-50:   rgb(246, 246, 248);   /* page surfaces  */
  --neutral-100:  rgb(237, 237, 237);
  --neutral-200:  rgb(218, 218, 218);
  --neutral-300:  rgb(217, 217, 217);
  --neutral-400:  rgb(207, 207, 207);
  --neutral-500:  rgb(109, 110, 114);
  --neutral-700:  rgb(92, 92, 92);
  --neutral-800:  rgb(40, 40, 40);
  --neutral-900:  rgb(0, 0, 0);

  /* ---------- Color: Semantic ---------- */
  --color-bg:           var(--neutral-0);
  --color-bg-soft:      var(--neutral-50);
  --color-bg-dark:      var(--quake-purple-800);
  --color-bg-deepest:   var(--quake-purple-900);

  --color-fg:           var(--quake-purple-800);
  --color-fg-strong:    var(--quake-purple-700);
  --color-fg-muted:     var(--neutral-500);
  --color-fg-on-dark:   var(--neutral-0);
  --color-fg-on-dark-2: var(--neutral-50);

  --color-brand:        var(--quake-purple-700);
  --color-brand-accent: var(--quake-yellow);
  --color-brand-hot:    var(--quake-orange);
  --color-brand-pink:   var(--quake-magenta);

  --color-border:       var(--quake-purple-500);
  --color-border-light: var(--neutral-200);
  --color-divider:      var(--quake-purple-500);

  --color-cta:          var(--quake-yellow);
  --color-cta-fg:       var(--quake-purple-800);
  --color-cta-hover:    var(--quake-yellow-soft);

  --color-link:         var(--quake-orange);
  --color-link-hover:   var(--quake-red);

  /* ---------- Typography ---------- */
  --font-display: 'Hurme Geometric Sans 4', 'Mulish', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Hurme Geometric Sans 4', 'Mulish', 'Helvetica Neue', system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale — Figma uses 14/16/18/24/32/40/56/80
     plus 50/500 for Instagram-story display. */
  --fs-xxs:  12px;
  --fs-xs:   14px;
  --fs-sm:   16px;
  --fs-md:   18px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;
  --fs-4xl:  80px;
  --fs-mega: 500px;

  --lh-tight:  1.0;
  --lh-snug:   1.2;
  --lh-base:   1.3;     /* default in Figma — 1.3 */
  --lh-relaxed: 1.4;    /* used at 18px body copy */

  /* ---------- Spacing scale ---------- */
  /* Figma layouts use 8/16/24/32/40/48/56/80 + 120 section pad. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  40px;
  --space-7:  48px;
  --space-8:  56px;
  --space-9:  80px;
  --space-10: 120px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;     /* tiny chips, icon containers */
  --radius-sm:   8px;     /* primary buttons, cards, ctas */
  --radius-md:   11px;    /* award stamps */
  --radius-pill: 9999px;  /* progress bar, language pills */

  /* ---------- Elevation ---------- */
  --shadow-card:    7px 7px 40px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 7px 12px 50px rgba(0, 0, 0, 0.10);
  --shadow-soft:    0 4px 24px rgba(50, 10, 75, 0.2);

  /* ---------- Layout ---------- */
  --page-max: 1280px;
  --page-pad-x: 80px;

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
}

/* =============================================================
   Semantic typography
   ============================================================= */

html { font-family: var(--font-body); color: var(--color-fg); }
body { font: var(--fw-regular) var(--fs-sm) / var(--lh-base) var(--font-body); }

.h-display {            /* hero — 80/1.3 */
  font: var(--fw-regular) var(--fs-4xl) / var(--lh-base) var(--font-display);
  color: var(--color-fg-on-dark);
  letter-spacing: -0.005em;
}
.h1 {                   /* section — 56/1.3 */
  font: var(--fw-regular) var(--fs-3xl) / var(--lh-base) var(--font-display);
  color: var(--color-brand);
}
.h2 {                   /* dark bg section — 40/1.2 */
  font: var(--fw-regular) var(--fs-2xl) / var(--lh-snug) var(--font-display);
  color: var(--color-fg-on-dark);
}
.h3 {                   /* card / column title — 32/1.3 */
  font: var(--fw-regular) var(--fs-xl) / var(--lh-base) var(--font-display);
  color: var(--color-fg-on-dark);
}
.h4 {                   /* review heading — 24/1.3 */
  font: var(--fw-regular) var(--fs-lg) / var(--lh-base) var(--font-display);
  color: var(--color-brand);
}

.text-lead {            /* hero supporting — 24/1.3 */
  font: var(--fw-regular) var(--fs-lg) / var(--lh-base) var(--font-body);
  color: var(--color-fg);
}
.text-body-lg {         /* 18/1.4 */
  font: var(--fw-regular) var(--fs-md) / var(--lh-relaxed) var(--font-body);
  color: var(--color-fg);
}
.text-body {            /* default — 16/1.3 */
  font: var(--fw-regular) var(--fs-sm) / var(--lh-base) var(--font-body);
}
.text-small {           /* meta — 14/1.3 */
  font: var(--fw-regular) var(--fs-xs) / var(--lh-base) var(--font-body);
}
.text-caption {         /* muted captions */
  font: var(--fw-regular) var(--fs-sm) / var(--lh-base) var(--font-body);
  color: var(--color-fg-muted);
}

.text-eyebrow {         /* WINNER / banner all-caps */
  font: var(--fw-bold) var(--fs-xs) / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cta-label {            /* button text — 16/1.3 + chunky for primary  */
  font: var(--fw-bold) var(--fs-sm) / 1 var(--font-body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Color helpers */
.fg-brand { color: var(--color-brand); }
.fg-on-dark { color: var(--color-fg-on-dark); }
.fg-muted { color: var(--color-fg-muted); }
.bg-soft { background: var(--color-bg-soft); }
.bg-dark { background: var(--color-bg-dark); color: var(--color-fg-on-dark); }
.bg-deepest { background: var(--color-bg-deepest); color: var(--color-fg-on-dark); }