/* ==========================================================================
   ENGINEERING MEDIA — Website Landing Pages
   Design tokens extracted from: e10-543 - Engineering Media - Website
   Landing Pages Designs.xd  (3 artboards: Machinery, Measurement, Landing)

   Source of truth for values below:
   - Colors marked "(swatch)"   -> XD document colour-swatches panel
   - Colors marked "(usage)"    -> counted directly from shape/text fills
   - Type styles marked "(library)" -> named XD character styles saved in
     the file's Document Library (most reliable — designer-authored)
   - Type styles marked "(usage)"   -> most common size/leading/tracking
     combination found across real text layers on the 3 artboards

   Read HANDOFF-NOTES.md alongside this file — it explains discrepancies,
   what still needs verifying against the live XD file, and font sourcing.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     COLOR — core palette (all appear repeatedly across the 3 artboards)
     --------------------------------------------------------------------- */
  --color-white:        #FFFFFF; /* 200 uses — page/section background */
  --color-ink:          #2D383B; /* 43 uses  — primary body text */
  --color-navy:         #02122C; /* 28 uses  — dark section bg / dark circles */
  --color-orange:       #ED8E3F; /* 33 uses  — primary accent, CTAs, icon badges */
  --color-green:        #85C442; /* 33 uses  — secondary accent, icon badges */
  --color-purple:       #73245C; /* 28 uses  — accent, default H2 color */
  --color-blue:         #5079BC; /* 26 uses  — accent */
  --color-deep-purple:  #241F35; /* 23 uses  — dark neutral, decorative shapes */
  --color-slate:        #353D4B; /* 12 uses  — secondary text (testimonials) */
  --color-bg-light:     #EDEEEF; /* 12 uses  — light section background */
  --color-gray-300:     #C4C4C4; /*  8 uses  — decorative dots/ellipses */
  --color-gray-400:     #959595; /*  6 uses  — muted text / dividers */
  --color-placeholder:  #F4F4F4; /*  4 uses  — image placeholder background */
  --color-border:       #898989; /*  4 uses  — 1px strokes/borders (stroke only) */
  --color-bg-light-alt: #EBEBEB; /*  4 uses  — light section bg, alt shade */
  --color-footer-bg:    #414B4E; /*  4 uses  — footer/dark panel background */

  /* Global colors saved in the XD Document Library (reusable brand colors) */
  --color-brand-green:  #85C442; /* same as --color-green, saved separately */
  --color-brand-blue:   #5079BC; /* same as --color-blue, saved separately */

  /* Defined in the swatches panel but NOT found on any of the 3 artboards.
     Kept for reference in case they're used on pages outside this export —
     confirm with the designer before using. */
  --color-unused-1: #343C4A;
  --color-unused-2: #EDEDED;
  --color-unused-3: #BF61B4;
  --color-unused-4: #EE4E28;
  --color-unused-5: #62C3D1;
  --color-unused-6: #89A1A9;
  --color-unused-7: #12AAAC;
  --color-unused-8: #26E9BA;

  /* ---------------------------------------------------------------------
     GRADIENTS — 3 decorative gradients found on background "blob" shapes
     (simplified to 4–5 stops from the original many-stop XD blends)
     --------------------------------------------------------------------- */
  --gradient-navy-radial: radial-gradient(circle, #0E3672 0%, #172A53 50%, #211F34 100%);
  --gradient-sunset:      linear-gradient(135deg, #7E1F60 0%, #C43E49 49%, #EE8E41 100%);
  --gradient-orange-plum: linear-gradient(135deg, #ED8E3F 0%, #B6534E 50%, #7E185E 100%);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — font families
     --------------------------------------------------------------------- */
  --font-display: 'Univia Pro', 'Jost', sans-serif; /* commercial font — see notes */
  --font-heading: 'Jost', sans-serif;                /* free on Google Fonts */
  --font-nav:     'Carbon', 'Jost', sans-serif;      /* commercial font — see notes */
  --font-body:    'Jost', sans-serif;
  --font-fallback:'Arial', Helvetica, sans-serif;    /* used verbatim in a few text blocks */

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — type scale
     Values are (size / line-height), letter-spacing in em, computed from
     XD's charSpacing (charSpacing / 1000 = em value).
     --------------------------------------------------------------------- */

  /* Hero / Display — Univia Pro, uppercase. This is the largest heading
     actually used in the artwork (see HANDOFF-NOTES.md re: the unused
     "H1 - Jost 90pt" library style). */
  --text-display-size: 64px;
  --text-display-line-height: 80px;
  --text-display-tracking: -0.02em;
  --text-display-transform: uppercase;

  /* H2 — matches the "H2 - Univia Pro — 42pt" style saved in the XD library */
  --text-h2-size: 42px;
  --text-h2-line-height: 50px;
  --text-h2-tracking: -0.005em;
  --text-h2-transform: uppercase;
  --text-h2-color: var(--color-purple);

  /* Large numeral / stat counter — e.g. "18,000", "780,000", "100%" */
  --text-stat-size: 52px;
  --text-stat-line-height: 55px;
  --text-stat-tracking: -0.02em;

  /* H3 — feature / icon-card heading, e.g. "Build Brand Awareness" */
  --text-h3-size: 33px;
  --text-h3-line-height: 33px;
  --text-h3-tracking: 0em;

  /* Body — large / lead paragraph */
  --text-body-lg-size: 26px;
  --text-body-lg-line-height: 33px;
  --text-body-lg-tracking: -0.02em;

  /* Body — standard paragraph copy */
  --text-body-size: 20px;
  --text-body-line-height: 24px;
  --text-body-tracking: 0em;

  /* Body — form fields / secondary copy */
  --text-body-sm-size: 18px;
  --text-body-sm-line-height: 24px;
  --text-body-sm-tracking: 0em;

  /* Nav label — uppercase, e.g. "Videos", "News", "Suppliers" */
  --text-nav-size: 15px;
  --text-nav-tracking: 0em;
  --text-nav-transform: uppercase;
  --text-nav-weight: 500; /* Jost Medium */

  /* Utility nav (top bar) — Carbon font, e.g. "About us", "Services" */
  --text-nav-alt-size: 17px;
  --text-nav-alt-tracking: 0em;
  --text-nav-alt-transform: uppercase;

  /* Button label — uppercase, e.g. "Download media pack" */
  --text-button-size: 17px;
  --text-button-tracking: 0em;
  --text-button-transform: uppercase;
  --text-button-weight: 700; /* Jost Bold */

  /* Caption / footer / copyright */
  --text-caption-size: 14px;
  --text-caption-line-height: 12px;

  /* Micro label, e.g. "FEED", "AUTHORS", "EXPLORE" */
  --text-micro-size: 10px;
  --text-micro-line-height: 12px;
  --text-micro-family: var(--font-fallback);

  /* Font weights actually used */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---------------------------------------------------------------------
     LAYOUT / GRID — from the XD layout-grid settings (identical on all
     3 artboards). Canvas width below is the XD artboard width; confirm
     with the designer whether this maps 1:1 to CSS px or is a 2x canvas.
     --------------------------------------------------------------------- */
  --grid-canvas-width: 1847px;
  --grid-columns: 12;
  --grid-gutter: 16px;
  --grid-margin: 139px;

  /* ---------------------------------------------------------------------
     RADIUS — corner radii found on rectangles/cards
     --------------------------------------------------------------------- */
  --radius-sm: 4px;   /* small chips */
  --radius-md: 8px;   /* inputs, small cards */
  --radius-lg: 29px;  /* most common — buttons, cards (also seen as 30px, treat as same) */
  --radius-xl: 40px;  /* large portrait/photo cards */

  /* ---------------------------------------------------------------------
     BORDERS
     --------------------------------------------------------------------- */
  --border-width: 1px; /* the only stroke width used anywhere in the file */
}

/* ==========================================================================
   TYPE SCALE — utility classes (optional convenience layer over the tokens)
   ========================================================================== */

.text-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  letter-spacing: var(--text-display-tracking);
  text-transform: var(--text-display-transform);
}

.text-h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-tracking);
  text-transform: var(--text-h2-transform);
  color: var(--text-h2-color);
}

.text-stat {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-stat-size);
  line-height: var(--text-stat-line-height);
  letter-spacing: var(--text-stat-tracking);
}

.text-h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-tracking);
}

.text-body-lg {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-tracking);
}

.text-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

.text-body-sm {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}

/* Short, single-line UI labels (nav/buttons) — XD stored a suspiciously
   tight line-height (12px regardless of font size) on these; that's almost
   certainly an auto-height text-frame artifact, not an intentional value.
   Using `normal` here — verify against the live file if pixel-perfect
   spacing matters. */
.text-nav {
  font-family: var(--font-nav);
  font-weight: var(--text-nav-weight);
  font-size: var(--text-nav-size);
  line-height: normal;
  letter-spacing: var(--text-nav-tracking);
  text-transform: var(--text-nav-transform);
}

.text-nav-alt {
  font-family: var(--font-nav);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-nav-alt-size);
  line-height: normal;
  text-transform: var(--text-nav-alt-transform);
}

.text-button {
  font-family: var(--font-body);
  font-weight: var(--text-button-weight);
  font-size: var(--text-button-size);
  line-height: normal;
  text-transform: var(--text-button-transform);
}

.text-caption {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
}

.text-micro {
  font-family: var(--text-micro-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
}