/* ============================================================================
   EXTREME GROUP — DESIGN TOKENS
   colors_and_type.css  ·  single source of truth for color + type + space
   ----------------------------------------------------------------------------
   Palette + logo verified against the official deck
   "ENGLISH - EXTREME GROUP [janeiro 2026]". Brand is DARK-FIRST: black hero
   surfaces, white + cool steel-gray text, vivid green accent, deep navy as a
   secondary. Type = Fira Sans (self-hosted brand upload).
   ============================================================================ */

/* Brand typeface: Fira Sans (self-hosted, official upload). Mono: IBM Plex Mono (CDN). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-MediumItalic.ttf') format('truetype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-SemiBoldItalic.ttf') format('truetype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-ExtraBoldItalic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts/FiraSans-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}

:root {
  /* ---- BRAND ANCHORS (verified from the official deck) -------------------- */
  /* Brand order: Black · Navy · Green · Steel · White */
  --xg-black:      #000000;   /* pure black — primary hero surface           */
  --xg-navy:       #14154A;   /* deep indigo-navy — secondary brand           */
  --xg-green:      #30DE7B;   /* vivid green — primary accent / action        */
  --xg-steel:      #90A0AD;   /* cool steel gray — signature muted / on-dark  */
  --xg-paper:      #FFFFFF;   /* white — light surface                       */
  --xg-ink:        #0B0C10;   /* near-black — text + dark surfaces            */

  /* ---- NEUTRAL SCALE (cool gray, from deck) ------------------------------- */
  --xg-neutral-950: #0B0C10;
  --xg-neutral-900: #14161C;
  --xg-neutral-800: #1E2128;
  --xg-neutral-700: #2C313A;
  --xg-neutral-600: #464C57;
  --xg-neutral-500: #6B7480;
  --xg-neutral-400: #90A0AD;   /* = --xg-steel */
  --xg-neutral-300: #C1CBD2;
  --xg-neutral-200: #DCE0E4;
  --xg-neutral-100: #E7EAED;
  --xg-neutral-50:  #F3F3F3;

  /* ---- GREEN SCALE (secondary accent) ------------------------------------ */
  --xg-green-700:  #178F4D;
  --xg-green-600:  #1FB863;
  --xg-green-500:  #30DE7B;   /* = --xg-green */
  --xg-green-400:  #4EE68C;
  --xg-green-200:  #A6F2C8;
  --xg-green-50:   #E7FCF0;

  /* ---- BLUE SCALE (primary accent) --------------------------------------- */
  --xg-blue-700:   #1526B0;
  --xg-blue-600:   #1B31D4;
  --xg-blue-500:   #203AEC;   /* = --xg-blue · primary accent / action */
  --xg-blue-400:   #5566F5;
  --xg-blue-200:   #B9C1FB;
  --xg-blue-50:    #EDEFFE;
  --xg-blue:       #203AEC;

  /* ---- NAVY SCALE --------------------------------------------------------- */
  --xg-navy-700:   #0C0D2E;
  --xg-navy-500:   #14154A;   /* = --xg-navy */
  --xg-navy-300:   #3A3B78;
  --xg-navy-100:   #E4E4EF;

  /* ---- SEMANTIC COLOR ----------------------------------------------------- */
  --xg-bg:            var(--xg-paper);
  --xg-bg-elevated:   #FFFFFF;
  --xg-bg-sunken:     var(--xg-neutral-50);
  --xg-bg-inverse:    var(--xg-black);      /* the brand's hero surface        */

  --xg-fg:            var(--xg-ink);        /* primary text                    */
  --xg-fg-muted:      var(--xg-neutral-600);/* secondary text                  */
  --xg-fg-subtle:     var(--xg-neutral-500);/* tertiary / captions             */
  --xg-fg-onDark:     #FFFFFF;              /* text on black surfaces          */
  --xg-fg-onDarkMuted:var(--xg-steel);      /* steel gray — muted on dark      */

  --xg-action:        var(--xg-blue-500);   /* primary interactive             */
  --xg-action-hover:  var(--xg-blue-600);
  --xg-action-press:  var(--xg-blue-700);
  --xg-action-fg:     #FFFFFF;              /* white text on blue              */

  --xg-border:        var(--xg-neutral-200);
  --xg-border-strong: var(--xg-neutral-300);
  --xg-border-onDark: rgba(255,255,255,0.14);

  --xg-focus-ring:    rgba(32,58,236,0.45);

  /* status */
  --xg-success: var(--xg-green-600);
  --xg-warning: #D9920A;
  --xg-danger:  #E5484D;
  --xg-info:    var(--xg-blue-500);

  /* ---- COMPAT ALIASES ----------------------------------------------------- */
  --xg-signal:    var(--xg-green);

  /* ---- TYPE FAMILIES ------------------------------------------------------ */
  --xg-font-display: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --xg-font-text:    'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --xg-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- TYPE SCALE --------------------------------------------------------- */
  --xg-text-display: 700 4.75rem/1.02 var(--xg-font-display);
  --xg-text-h1:      700 3rem/1.06 var(--xg-font-display);
  --xg-text-h2:      600 2.125rem/1.12 var(--xg-font-display);
  --xg-text-h3:      600 1.375rem/1.25 var(--xg-font-display);
  --xg-text-h4:      600 1.125rem/1.3 var(--xg-font-display);
  --xg-text-bodyLg:  400 1.25rem/1.55 var(--xg-font-text);
  --xg-text-body:    400 1.0625rem/1.6 var(--xg-font-text);
  --xg-text-small:   400 0.875rem/1.5 var(--xg-font-text);
  --xg-text-caption: 500 0.75rem/1.4 var(--xg-font-text);

  --xg-tracking-tight: -0.03em;   /* display / headlines                      */
  --xg-tracking-snug:  -0.01em;
  --xg-tracking-wide:   0.02em;
  --xg-tracking-label:  0.12em;   /* mono eyebrow labels, UPPERCASE           */

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

  /* ---- RADII -------------------------------------------------------------- */
  --xg-radius-xs: 4px;
  --xg-radius-sm: 8px;
  --xg-radius-md: 14px;
  --xg-radius-lg: 22px;
  --xg-radius-xl: 32px;
  --xg-radius-pill: 999px;

  /* ---- ELEVATION ---------------------------------------------------------- */
  --xg-shadow-sm: 0 1px 2px rgba(13,14,18,0.06), 0 1px 3px rgba(13,14,18,0.04);
  --xg-shadow-md: 0 4px 12px rgba(13,14,18,0.07), 0 2px 4px rgba(13,14,18,0.05);
  --xg-shadow-lg: 0 18px 40px rgba(13,14,18,0.12), 0 6px 12px rgba(13,14,18,0.06);
  --xg-shadow-blue: 0 10px 28px rgba(32,58,236,0.30);

  /* ---- MOTION ------------------------------------------------------------- */
  --xg-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --xg-ease-emph: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --xg-dur-fast: 140ms; /* @kind other */
  --xg-dur: 220ms; /* @kind other */
  --xg-dur-slow: 420ms; /* @kind other */

  /* layout */
  --xg-container: 1200px;
  --xg-container-wide: 1360px;
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS — opt-in helpers (use the .xg scope to avoid
   clobbering host pages). Apply class="xg" to a root to inherit base type.
   ============================================================================ */
.xg {
  font: var(--xg-text-body);
  color: var(--xg-fg);
  background: var(--xg-bg);
  letter-spacing: var(--xg-tracking-snug);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.xg h1, .xg .xg-h1 { font: var(--xg-text-h1); letter-spacing: var(--xg-tracking-tight); margin: 0; }
.xg h2, .xg .xg-h2 { font: var(--xg-text-h2); letter-spacing: var(--xg-tracking-tight); margin: 0; }
.xg h3, .xg .xg-h3 { font: var(--xg-text-h3); letter-spacing: var(--xg-tracking-snug); margin: 0; }
.xg h4, .xg .xg-h4 { font: var(--xg-text-h4); margin: 0; }
.xg .xg-display { font: var(--xg-text-display); letter-spacing: var(--xg-tracking-tight); margin: 0; }
.xg .xg-body-lg { font: var(--xg-text-bodyLg); }
.xg small, .xg .xg-small { font: var(--xg-text-small); }

/* mono eyebrow label — the brand's recurring "tag" device */
.xg-eyebrow {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--xg-tracking-label);
  color: var(--xg-action);
}

.xg a { color: var(--xg-action); text-decoration: none; }
.xg a:hover { text-decoration: underline; text-underline-offset: 3px; }
.xg code, .xg .xg-mono { font-family: var(--xg-font-mono); font-size: 0.95em; }