/* =============================================================================
   MaxTAF Design System — Tokens
   Brand guidelines v1.2 · Automation Technology Solutions · Code Development Ltd
   =============================================================================
   Load this file first on every surface. Everything else is layered on top.
   ============================================================================= */

/* Variable — covers every weight in one file on modern browsers */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Static weights — for PowerPoint/PDF export, older engines, email */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Light.ttf")       format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.ttf")     format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Italic.ttf")      format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.ttf")      format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Bold.ttf")        format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-BoldItalic.ttf")  format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Black.ttf")       format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---------------------------------------------------------------------------
     COLORS — sourced from MaxTAF-Logo-and-Colour-Swatches.pdf (authoritative)
     --------------------------------------------------------------------------- */

  /* Core neutral — primary brand color */
  --mt-charcoal: #212121;

  /* Brand five — "Charcoal + Teal, Plum, Burnt Orange, Sea Breeze Blue" */
  --mt-teal:         #7AC1BB;   /* "Teal" / Sea Breeze Green */
  --mt-plum:         #662B7F;   /* "Plum" */
  --mt-burnt-orange: #E25025;   /* "Burnt Orange" — the signal color */
  --mt-sea-blue:     #299ED9;   /* "Sea Breeze Blue" */

  /* Tints — lighter pairs for diagrams, charts, infographics, backgrounds */
  --mt-teal-tint:         #BCE0DD;
  --mt-plum-tint:         #B292C0;
  --mt-burnt-orange-tint: #F1A887;
  --mt-sea-blue-tint:     #95CFEC;

  /* Deep shades — for emphasis, headings on light, dense backgrounds */
  --mt-teal-deep:         #3E625F;
  --mt-plum-deep:         #331440;
  --mt-burnt-orange-deep: #722A14;
  --mt-sea-blue-deep:     #16506D;

  /* Surfaces (derived — not in guidelines, but required for applied UI) */
  --mt-white:      #FFFFFF;
  --mt-paper:      #FAFAFA;   /* default page bg */
  --mt-mist:       #F2F2F2;   /* subtle section divider bg */
  --mt-stone:      #E5E5E5;   /* card / input borders on light */
  --mt-slate:      #BDBDBD;   /* muted icons / dividers */
  --mt-graphite:   #616161;   /* secondary text */
  --mt-ink:        #3A3A3A;   /* primary body text (softer than charcoal) */

  /* Semantic — mapped to brand hues, never invented */
  --mt-primary:         var(--mt-charcoal);
  --mt-accent:          var(--mt-burnt-orange);
  --mt-accent-hover:    var(--mt-burnt-orange-deep);
  --mt-info:            var(--mt-sea-blue);
  --mt-success:         var(--mt-teal);
  --mt-warning:         var(--mt-burnt-orange);
  --mt-danger:          var(--mt-burnt-orange-deep);

  --mt-link:            var(--mt-burnt-orange);
  --mt-link-hover:      var(--mt-burnt-orange-deep);

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — Montserrat everywhere (Bold / Regular / Light)
     Sizes from brand guidelines p.04, rounded to a UI-friendly px scale
     --------------------------------------------------------------------------- */
  --mt-font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Weights */
  --mt-weight-light:   300;
  --mt-weight-regular: 400;
  --mt-weight-medium:  500;
  --mt-weight-bold:    700;
  --mt-weight-black:   900;

  /* Display / heading scale — guideline intent preserved (H1 60pt → 60px ref) */
  --mt-fs-display: clamp(48px, 5.2vw, 72px);   /* hero */
  --mt-fs-h1:      clamp(40px, 4vw, 60px);     /* H1 60pt */
  --mt-fs-h2:      clamp(28px, 2.8vw, 37px);   /* H2 37pt */
  --mt-fs-h3:      clamp(20px, 1.6vw, 23px);   /* H3 23pt */
  --mt-fs-h4:      18px;
  --mt-fs-h5:      14px;   /* FULL CAPS sub-header / pull-out */
  --mt-fs-body:    16px;
  --mt-fs-body-lg: 18px;   /* H4 large body 14pt in guidelines → applied at 18px web */
  --mt-fs-body-sm: 14px;
  --mt-fs-caption: 12px;

  /* Line heights — tighter on display, looser on body */
  --mt-lh-tight:   1.05;
  --mt-lh-snug:    1.2;
  --mt-lh-normal:  1.5;
  --mt-lh-relaxed: 1.65;

  /* Tracking — full-caps sub-header is a signature; keep airy */
  --mt-ls-caps:     0.16em;
  --mt-ls-caps-sm:  0.12em;
  --mt-ls-tight:   -0.01em;
  --mt-ls-normal:   0;

  /* ---------------------------------------------------------------------------
     SPACING — 4px base, geometric-ish scale
     --------------------------------------------------------------------------- */
  --mt-s-0:   0;
  --mt-s-1:   4px;
  --mt-s-2:   8px;
  --mt-s-3:  12px;
  --mt-s-4:  16px;
  --mt-s-5:  24px;
  --mt-s-6:  32px;
  --mt-s-7:  48px;
  --mt-s-8:  64px;
  --mt-s-9:  96px;
  --mt-s-10: 128px;

  /* ---------------------------------------------------------------------------
     RADII — calm, slightly rounded. Brandmark itself is a rounded hex/pill shape
     --------------------------------------------------------------------------- */
  --mt-r-xs:  2px;
  --mt-r-sm:  4px;
  --mt-r-md:  8px;
  --mt-r-lg:  14px;
  --mt-r-xl:  24px;
  --mt-r-pill: 999px;

  /* ---------------------------------------------------------------------------
     ELEVATION — subtle, cool charcoal shadows (no colored glow)
     --------------------------------------------------------------------------- */
  --mt-e-1: 0 1px 2px rgba(33,33,33,.06), 0 1px 1px rgba(33,33,33,.04);
  --mt-e-2: 0 4px 10px rgba(33,33,33,.06), 0 2px 4px rgba(33,33,33,.04);
  --mt-e-3: 0 12px 28px rgba(33,33,33,.09), 0 4px 10px rgba(33,33,33,.05);
  --mt-e-4: 0 24px 56px rgba(33,33,33,.12), 0 8px 18px rgba(33,33,33,.06);

  /* ---------------------------------------------------------------------------
     BORDERS
     --------------------------------------------------------------------------- */
  --mt-bw-hair: 1px;
  --mt-bw-1:    1px;
  --mt-bw-2:    2px;
  --mt-bw-3:    3px;

  /* ---------------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------------- */
  --mt-ease-out: cubic-bezier(.2, .7, .2, 1);
  --mt-ease-in-out: cubic-bezier(.6, .0, .2, 1);
  --mt-dur-fast:  140ms;
  --mt-dur-base:  220ms;
  --mt-dur-slow:  420ms;

  /* ---------------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------------- */
  --mt-container:  1200px;
  --mt-container-wide: 1440px;
  --mt-gutter:     24px;

  /* ---------------------------------------------------------------------------
     Z
     --------------------------------------------------------------------------- */
  --mt-z-base:     0;
  --mt-z-raised:  10;
  --mt-z-nav:     50;
  --mt-z-overlay: 80;
  --mt-z-modal:  100;
  --mt-z-toast:  120;
}

/* -----------------------------------------------------------------------------
   Dark surface (used selectively — footer, hero overlays, chat widget)
   Charcoal is the main brand color, so "dark" here is not a full dark mode,
   it's the brand's dense surface.
   ----------------------------------------------------------------------------- */
.mt-on-dark {
  --mt-ink:      #F5F5F5;
  --mt-graphite: #BDBDBD;
  --mt-stone:    #3A3A3A;
  --mt-mist:     #2A2A2A;
  --mt-paper:    #1A1A1A;
  --mt-white:    #212121;
  color: var(--mt-ink);
  background: var(--mt-charcoal);
}

/* -----------------------------------------------------------------------------
   Utility base — minimal, token-driven, no reset wars with host CSS
   ----------------------------------------------------------------------------- */
.mt-root {
  font-family: var(--mt-font-sans);
  font-size: var(--mt-fs-body);
  line-height: var(--mt-lh-normal);
  color: var(--mt-ink);
  background: var(--mt-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mt-h1, .mt-h2, .mt-h3, .mt-h4 { font-family: var(--mt-font-sans); color: var(--mt-charcoal); text-wrap: balance; }
.mt-h1 { font-size: var(--mt-fs-h1); font-weight: var(--mt-weight-bold); line-height: var(--mt-lh-tight);   letter-spacing: var(--mt-ls-tight); }
.mt-h2 { font-size: var(--mt-fs-h2); font-weight: var(--mt-weight-bold); line-height: var(--mt-lh-snug);    letter-spacing: var(--mt-ls-tight); }
.mt-h3 { font-size: var(--mt-fs-h3); font-weight: var(--mt-weight-light);line-height: var(--mt-lh-snug);   letter-spacing: var(--mt-ls-normal); }
.mt-h4 { font-size: var(--mt-fs-h4); font-weight: var(--mt-weight-regular); line-height: var(--mt-lh-normal); }

.mt-eyebrow {
  font-family: var(--mt-font-sans);
  font-weight: var(--mt-weight-bold);
  font-size: var(--mt-fs-h5);
  text-transform: uppercase;
  letter-spacing: var(--mt-ls-caps);
  color: var(--mt-burnt-orange);
}

.mt-body      { font-size: var(--mt-fs-body); line-height: var(--mt-lh-relaxed); color: var(--mt-ink); text-wrap: pretty; }
.mt-body-lg   { font-size: var(--mt-fs-body-lg); line-height: var(--mt-lh-relaxed); color: var(--mt-ink); text-wrap: pretty; }
.mt-body-sm   { font-size: var(--mt-fs-body-sm); line-height: var(--mt-lh-normal); color: var(--mt-graphite); }
.mt-caption   { font-size: var(--mt-fs-caption); line-height: var(--mt-lh-normal); color: var(--mt-graphite); text-transform: uppercase; letter-spacing: var(--mt-ls-caps-sm); }

/* Selection uses the signal color */
::selection { background: var(--mt-burnt-orange); color: #fff; }