/* Matera Design System — Colors & Type
 * Source: Matera Guia de Marca 2024
 */

/* ---------- Fonts ---------- */
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Thin.ttf') format('truetype'); font-weight:100; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ThinItalic.ttf') format('truetype'); font-weight:100; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Light.ttf') format('truetype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Black.ttf') format('truetype'); font-weight:900; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; }
@font-face { font-family:'Organetto'; src:url('fonts/Organetto-ExpThin.otf') format('opentype'); font-weight:100; font-style:normal; }
@font-face { font-family:'Organetto'; src:url('fonts/Organetto-ExpUltraLight.otf') format('opentype'); font-weight:200; font-style:normal; }
@font-face { font-family:'Organetto'; src:url('fonts/Organetto-Light.otf') format('opentype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Organetto'; src:url('fonts/Organetto-Bold.otf') format('opentype'); font-weight:700; font-style:normal; }
/* Organetto: proprietary display face for headlines & grafismos. */

:root {
  /* ---- Primary palette (cores principais) ---- */
  --matera-blue:   #461CDC;   /* Pantone 2369 C — the flagship brand color */
  --matera-green:  #6BFF50;   /* Pantone 2286 C — electric accent / grafismos */
  --matera-black:  #000023;   /* Pantone BLACK 6 C — near-black with blue undertone */
  --matera-white:  #FFFFFF;

  /* ---- Secondary palette (usage limited: small text, CTAs, exceptions) ---- */
  --matera-gray-2: #F2F2F2;   /* Pantone Cool Gray 2 U — surfaces / backgrounds */
  --matera-gray-4: #BFBFBF;   /* Pantone 421 U — borders / disabled */

  /* ---- Derived tints & shades (for hover/press/transparency layers) ---- */
  --blue-900:  #1F0D63;
  --blue-700:  #3617B0;
  --blue-600:  #461CDC;   /* base */
  --blue-500:  #6A47E4;
  --blue-400:  #8E74EB;
  --blue-200:  #D2C7F7;
  --blue-050:  #F0ECFD;

  --green-700: #2FD313;
  --green-600: #4EEA30;
  --green-500: #6BFF50;   /* base */
  --green-300: #A9FF99;
  --green-100: #E2FFDB;

  /* ---- Semantic color tokens ---- */
  --bg:           var(--matera-white);
  --bg-alt:       var(--matera-gray-2);
  --bg-inverse:   var(--matera-blue);
  --bg-deep:      var(--matera-black);

  --fg1:          var(--matera-black);   /* primary text */
  --fg2:          #3D3D5C;                /* secondary text */
  --fg3:          #6F6F86;                /* tertiary / captions */
  --fg-on-blue:   var(--matera-white);
  --fg-on-green:  var(--matera-blue);
  --fg-on-black:  var(--matera-green);    /* distinctive: green on near-black */

  --accent:       var(--matera-green);
  --accent-fg:    var(--matera-blue);

  --border:       var(--matera-gray-4);
  --border-soft:  #E3E3EA;
  --border-strong:var(--matera-black);

  --link:         var(--matera-blue);
  --link-hover:   var(--blue-700);

  --success:      #2FD313;
  --warning:      #E6A400;
  --danger:       #E63946;

  /* ---- Type scale ---- */
  --font-body:    'Poppins', 'Arial', system-ui, sans-serif;
  --font-display: 'Organetto', 'Poppins', sans-serif;
  --font-system:  'Arial', system-ui, sans-serif;         /* guide-specified fallback */

  /* Weights Matera recommends: Regular + SemiBold for clarity */
  --fw-thin:        100;
  --fw-extralight:  200;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Brand-aligned scale (presentations: 24/18/12/10 minimum; web scale bumped) */
  --fs-caption:   12px;
  --fs-small:     14px;
  --fs-body:      16px;
  --fs-lead:      18px;
  --fs-h4:        22px;
  --fs-h3:        28px;
  --fs-h2:        40px;
  --fs-h1:        56px;
  --fs-display:   96px;
  --fs-hero:      160px;    /* grafismo-style oversized display */

  --lh-tight:     1.08;
  --lh-snug:      1.25;
  --lh-normal:    1.5;      /* guide: "pelo menos 1,5x" */
  --lh-loose:     1.75;

  --ls-tight:     -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.12em;   /* guide: 0.12× for letter spacing floor */

  /* ---- Spacing (8pt base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,35,0.06), 0 1px 3px rgba(0,0,35,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,35,0.08), 0 2px 4px rgba(0,0,35,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,35,0.12), 0 4px 8px rgba(0,0,35,0.06);
  --shadow-glow-green: 0 0 0 4px rgba(107,255,80,0.28);
  --shadow-glow-blue:  0 0 0 4px rgba(70,28,220,0.20);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   420ms;
}

/* ---- Semantic element styles ---- */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}
h2, .h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
p, .p { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg2); }
small, .small { font-size: var(--fs-small); color: var(--fg3); }
.caption { font-size: var(--fs-caption); color: var(--fg3); letter-spacing: 0.02em; }

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--matera-blue);
  font-weight: var(--fw-semibold);
}

code, .mono {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Alignment guidance: left-align paragraphs, never justify (per guide) */
.prose { text-align: left; text-wrap: pretty; }