/* ============================================================
   Gladiatek — Colors & Type
   Sourced from Gladiatek.fig + gladiatek.com
   ============================================================ */

/* ---------- Webfonts ----------
   Open Sans  → Google Fonts (exact match)
   Gilroy-ExtraBold → NOT free.
     Substitute: Manrope ExtraBold (closest geometric, high x-height).
     The user should drop the licensed Gilroy .ttf into /fonts and
     update --font-display below.
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Open+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ───────────────  PALETTE  ─────────────── */

  /* Brand — primary accents */
  --gt-red:        rgb(228, 12, 36);   /* signature accent: logo G, slabs, CTAs */
  --gt-red-bright: rgb(225, 0, 15);    /* secondary red, used sparingly */
  --gt-cyan:       rgb(0, 180, 216);   /* paired accent: section blocks, highlights */
  --gt-cyan-deep:  rgb(20, 132, 162);  /* darker cyan slab */
  --gt-cyan-ink:   rgb(40, 83, 107);   /* deepest cyan, large blocks */
  --gt-cyan-soft:  rgb(186, 240, 255); /* faint cyan tint */
  --gt-cyan-soft2: rgb(150, 230, 245); /* faint cyan stroke */

  /* Ink + paper */
  --gt-ink:        rgb(6, 7, 7);       /* near-black, body + headings on light */
  --gt-ink-2:      rgb(34, 34, 34);    /* secondary ink */
  --gt-ink-3:      rgb(16, 16, 16);    /* deep panel fill */
  --gt-ink-4:      rgb(55, 55, 55);    /* dark surface (UI Kit canvas) */
  --gt-ink-5:      rgb(64, 64, 64);    /* mute ink */
  --gt-paper:      rgb(255, 255, 255); /* page bg */
  --gt-paper-2:    rgb(243, 243, 243); /* faint section */

  /* Pure black for outlines */
  --gt-black:      rgb(0, 0, 0);

  /* Status & utility (only seen once or twice in the file) */
  --gt-violet:     rgb(151, 71, 255);  /* spec-only annotation stroke (devmode) */
  --gt-amber:      rgb(255, 192, 66);
  --gt-mint:       rgb(128, 237, 153);
  --gt-deep-navy:  rgb(34, 40, 76);

  /* Shadows */
  --gt-shadow-rgba:        rgba(6, 7, 7, 0.05);
  --gt-shadow-black-rgba:  rgba(0, 0, 0, 0.05);
  --gt-shadow-cyan-rgba:   rgba(0, 180, 216, 0.20);

  /* ───────────────  SEMANTIC  ─────────────── */
  --bg:            var(--gt-paper);
  --bg-inverse:    var(--gt-ink);
  --bg-section:    var(--gt-paper-2);
  --bg-canvas:     var(--gt-ink-4);   /* dark UI-Kit canvas */
  --surface:       var(--gt-paper);
  --surface-dark:  var(--gt-ink-3);

  --fg:            var(--gt-ink);
  --fg-2:          var(--gt-ink-2);
  --fg-mute:       var(--gt-ink-5);
  --fg-on-dark:    var(--gt-paper);

  --accent:        var(--gt-red);
  --accent-2:      var(--gt-cyan);

  --border:        var(--gt-ink);
  --border-soft:   rgba(6, 7, 7, 0.10);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ───────────────  RADII  ─────────────── */
  --radius-pill:   32px;   /* buttons */
  --radius-input:  24px;   /* form fields */
  --radius-card:   24px;   /* image / content cards */
  --radius-tag:    16px;
  --radius-xs:     8px;
  --radius-sm:     5px;
  --radius-xxs:    2px;

  /* ───────────────  SPACING  ─────────────── */
  --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;
  --space-11: 160px; /* page gutter on 1440 layout */

  /* Layout */
  --container:     1120px;
  --gutter:        160px;
  --nav-height:    152px;

  /* ───────────────  SHADOWS  ─────────────── */
  --shadow-1:    0 4px 12px var(--gt-shadow-rgba);
  --shadow-2:    0 8px 24px var(--gt-shadow-rgba);
  --shadow-cyan: 0 12px 40px var(--gt-shadow-cyan-rgba);

  /* ───────────────  MOTION  ─────────────── */
  --ease-std: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med:  240ms;
  --dur-slow: 480ms;

  /* ───────────────  TYPE  ─────────────── */
  --font-display: "Manrope", "Gilroy", "Gilroy-ExtraBold", system-ui, sans-serif;  /* Gilroy substitute */
  --font-body:    "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Display weights are baked into the variable (Gilroy-ExtraBold = 800) */
  --weight-display:    800;
  --weight-body-light: 300;
  --weight-body:       400;
  --weight-body-bold:  700;

  /* Type scale (matches Figma) */
  --fs-h1:        56px;   /* hero, display */
  --fs-h1-tight:  56px;
  --fs-h2:        40px;   /* section headers */
  --fs-h3:        32px;   /* card titles, subtitles */
  --fs-h4:        24px;
  --fs-subtitle:  20px;
  --fs-body:      20px;
  --fs-body-sm:   16px;
  --fs-caption:   12px;

  --lh-display:   1.30;
  --lh-h1:        1.39;   /* 56 / 78 */
  --lh-body:      1.30;   /* 20 / 26 */
  --lh-body-sm:   1.375;
  --lh-tight:     1.10;

  --snp-warn:        var(--gt-amber);
  --snp-warn-soft:   rgba(255, 192, 66, 0.16);
  --snp-flash-error: rgba(228, 12, 36, 0.12);
}

/* ───────────────  ELEMENT DEFAULTS  ─────────────── */
html, body {
  font-family: var(--font-body);
  font-weight: var(--weight-body-light);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--fg);
  background:  var(--bg);
}

h1, .gt-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size:   var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
h2, .gt-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size:   var(--fs-h2);
  line-height: 1.30;
  color: var(--fg);
  margin: 0;
}
h3, .gt-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size:   var(--fs-h3);
  line-height: 1.25;
  color: var(--fg);
  margin: 0;
}
h4, .gt-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size:   var(--fs-h4);
  line-height: 1.30;
  color: var(--fg);
  margin: 0;
}

.gt-subtitle {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size:   var(--fs-h3);            /* 32 / Open Sans Bold */
  line-height: 1.30;
}

.gt-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size:   var(--fs-body-sm);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--accent-2);
}

p, .gt-p {
  font-family: var(--font-body);
  font-weight: var(--weight-body-light);
  font-size:   var(--fs-body);
  line-height: 1.30;
  color: var(--fg);
}
.gt-p--bold { font-weight: var(--weight-body-bold); }
.gt-p--small { font-size: var(--fs-body-sm); line-height: 1.375; }
.gt-caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-mute); }

.gt-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-std);
}
.gt-link:hover { color: var(--accent-2); }