/* ============================================================
   Vega NZ Design System — Tokens
   Colors, type, spacing, radii, shadows. Single source of truth.

   Reconciled against the LIVE vega-global.co.nz stylesheet
   (Forge Creative, "Vega custom styles" v1.0.0). The brand values
   below — fonts, red, button shape, heading weights — are taken
   directly from production CSS, not inferred. Extra scaffolding
   (red tint scale, semantic surfaces, shadows, motion) is layered
   on top for prototyping and recalculated around the real red.
   ============================================================ */

/* --- Webfonts (the real families the live site loads) -------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Yantramanav:wght@400;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ------------------------------------------------------------
     BRAND COLORS
     The Vega "V" logo is a downward-pointing wedge with a vertical
     red gradient (bright coral-pink at the top → deep crimson at
     the point). The primary brand red is Vega's cardinal red,
     #C41E3A, used flat as the workhorse accent across the site.
     A second, brighter red (#D61145) appears ONLY on interactive
     hover/active states (the services nav buttons).
     ------------------------------------------------------------ */
  --vega-red:        #C41E3A;  /* PRIMARY brand red (site "pink") */
  --vega-red-50:     #FBEAEE;
  --vega-red-100:    #F0D1DA;  /* site "lightpink"  — real brand tint */
  --vega-red-200:    #E3A9B6;
  --vega-red-300:    #D67790;  /* site "mediumpink" — real brand tint */
  --vega-red-400:    #CE4A66;
  --vega-red-500:    #C41E3A;  /* = --vega-red */
  --vega-red-600:    #A81832;
  --vega-red-700:    #8A1328;
  --vega-red-800:    #5E0D1B;
  --vega-red-900:    #3A080F;

  /* Brighter interactive red — used on hover/active only */
  --vega-red-accent: #D61145;

  /* Brand gradient — matches the logo wedge's vertical fade */
  --vega-red-gradient: linear-gradient(180deg, #EC6275 0%, #C41E3A 52%, #9E1730 100%);
  /* Diagonal version for hero panels & accent strokes */
  --vega-red-gradient-diag: linear-gradient(135deg, #EC6275 0%, #C41E3A 55%, #9E1730 100%);

  /* ------------------------------------------------------------
     NEUTRALS
     Pure black is a brand anchor (theme-color = #000000; footer &
     header backgrounds). #333 is the site's dark surface (project
     captions, card spines, the solution-group block). #6D6E70 is
     the support-table grey. #E5E5E5 is the light panel grey
     (stat table, active tabs, services hover).
     ------------------------------------------------------------ */
  --black:           #000000;
  --ink:             #000000;  /* body text on light — site uses pure black */
  --ink-2:           #333333;  /* secondary dark surface / text */
  --grey-900:        #1A1A1A;
  --grey-800:        #333333;  /* site #333 — dark caption/spine/block */
  --grey-700:        #4D4D4D;
  --grey-600:        #6D6E70;  /* site grey (support table) */
  --grey-500:        #8E8F91;
  --grey-400:        #B3B4B6;
  --grey-300:        #D1D2D3;
  --grey-200:        #E5E5E5;  /* site light panel grey */
  --grey-100:        #F0F0F0;
  --grey-50:         #F7F7F7;
  --white:           #FFFFFF;

  /* ------------------------------------------------------------
     SEMANTIC SURFACES
     fg = foreground (text/icons), bg = background, line = border.
     Numbered tokens go from highest contrast (1) to lowest (3).
     ------------------------------------------------------------ */
  --fg-1:            var(--ink);        /* primary text */
  --fg-2:            var(--grey-700);   /* secondary text, sub-copy */
  --fg-3:            var(--grey-600);   /* muted text, captions */
  --fg-on-dark:      var(--white);
  --fg-on-dark-2:    rgba(255,255,255,0.78);
  --fg-on-dark-3:    rgba(255,255,255,0.52);
  --fg-accent:       var(--vega-red);

  --bg-1:            var(--white);      /* page background */
  --bg-2:            var(--grey-200);   /* alternating light-grey section */
  --bg-3:            var(--grey-100);   /* cards on grey-200 */
  --bg-dark:         var(--black);      /* dark sections, footer, hero */
  --bg-dark-2:       var(--grey-800);   /* #333 panels */

  --line-1:          var(--grey-200);   /* hairline dividers */
  --line-2:          var(--grey-300);   /* card borders */
  --line-strong:     var(--grey-800);   /* the brand's heavy #333 spine/border */
  --line-on-dark:    rgba(255,255,255,0.14);

  /* Status (used sparingly — Vega is a corporate AV/IT brand) */
  --success:         #1F8A5B;
  --warning:         #C77A00;
  --danger:          var(--vega-red);
  --info:            #2A6FDB;

  /* ------------------------------------------------------------
     TYPOGRAPHY — FAMILIES (verbatim from the live site)
     Body / headings: Nunito — a rounded humanist sans. This is the
                       workhorse: headlines, body, buttons, nav,
                       links. Weights used: 300 / 400 / 600 / 700.
     Display (heavy):  Yantramanav — loaded site-wide at 400 & a
                       heavy 900. Reserved for big, bold display
                       moments (oversized stat numbers, hero
                       display) where Nunito 700 isn't punchy enough.
     Mono:             JetBrains Mono — spec tables / code only
                       (scaffolding; not on the marketing site).
     ------------------------------------------------------------ */
  --font-body:       'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --font-display:    'Yantramanav', 'Nunito', 'Helvetica Neue', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ------------------------------------------------------------
     TYPE SCALE (anchored on the site's real sizes)
     The signature move is LIGHT-weight (300) headlines set large
     and airy. h2 is the section label: semibold, RED, letter-spaced,
     uppercase. h3 is bold and red. Body copy is light (300).
     ------------------------------------------------------------ */
  --fs-display-xl:   70px;   /* extended hero display (light) */
  --fs-display-lg:   50px;   /* = site h1 */
  --fs-display-md:   40px;
  --fs-display-sm:   35px;   /* = site h2 */
  --fs-h1:           50px;   /* light 300 */
  --fs-h2:           35px;   /* semibold 600, red, letter-spaced */
  --fs-h3:           20px;   /* bold 700, red */
  --fs-h4:           18px;
  --fs-eyebrow:      14px;   /* uppercase section labels */
  --fs-body-lg:      20px;   /* "strong" intro paragraphs */
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;

  --lh-tight:        1.2;    /* large display */
  --lh-snug:         1.3;    /* headlines */
  --lh-normal:       1.6;    /* body */
  --lh-relaxed:      1.7;    /* long-form / airy h1 */

  --tracking-tight:  0;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;  /* buttons (~1px on 20px), h2 (~1.75px on 35px) */
  --tracking-xwide:  0.1em;   /* eyebrows, footer menu */

  /* ------------------------------------------------------------
     SPACING — 4px base.
     The live site spaces sections with 50 / 70 / 100px spacers;
     the scale below covers those steps.
     ------------------------------------------------------------ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-18:  70px;   /* site "space-70" */
  --space-20:  80px;
  --space-24:  96px;
  --space-25:  100px;  /* site "space-100" */
  --space-32:  128px;

  /* ------------------------------------------------------------
     RADII
     The brand splits sharply: INTERACTIVE elements (buttons, inputs,
     chips) are PILLS; CONTENT (cards, panels, images) is SQUARE or
     barely rounded. Buttons use a fully-rounded pill (site uses
     40–100px); inputs are pills too (site: 500px / 30px on textareas).
     ------------------------------------------------------------ */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-input: 30px;    /* textareas & multi-line fields */
  --radius-pill:  100px;   /* buttons, single-line inputs, chips, badges */

  /* ------------------------------------------------------------
     SHADOWS / ELEVATION
     The live site is shadow-light — it leans on borders and flat
     colour blocks. These soft, cool shadows are scaffolding for
     prototypes. The red-tinted glow is reserved for hero CTAs.
     ------------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.07);
  --shadow-md:  0 8px 20px rgba(0,0,0,0.08);
  --shadow-lg:  0 18px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 30px 70px rgba(0,0,0,0.18);
  --shadow-red: 0 16px 44px rgba(196,30,58,0.30);
  --shadow-inset-line: inset 0 0 0 1px var(--line-2);

  /* ------------------------------------------------------------
     MOTION
     The live site transitions almost everything with `all 0.5s ease`
     (buttons, links) and `0.3s ease` (image/hover). No bounce, no
     spring — it's an enterprise integrator brand.
     ------------------------------------------------------------ */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  ease;
  --dur-fast:     200ms;
  --dur-base:     300ms;   /* image / hover swaps */
  --dur-slow:     500ms;   /* button & link colour transitions (site default) */

  /* Layout */
  --container:        1280px;
  --container-narrow: 960px;
  --header-h:         100px;  /* site mobile-menu offset / sticky header */
}

/* ============================================================
   SEMANTIC TYPE — drop-in classes
   Use these instead of styling tags directly when composing layouts.
   Heading weights mirror the live site: LIGHT (300) display & h1,
   SEMIBOLD (600) red h2 section labels, BOLD (700) red h3.
   ============================================================ */

.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm,
.t-h1 {
  font-family: var(--font-body);
  font-weight: 300;            /* signature LIGHT headlines */
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
.t-display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-snug); }
.t-display-md { font-size: var(--fs-display-md); line-height: var(--lh-snug); }
.t-display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-snug); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-relaxed); }

/* Optional heavy display face (Yantramanav 900) — big stat numbers,
   oversized hero words. Use sparingly. */
.t-display-heavy {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

/* h2 — the brand's section label: semibold, RED, letter-spaced, caps.
   Pair .t-h2 (red "line one") with .t-h2.is-ink (black "line two")
   for the signature two-tone opener. */
.t-h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--vega-red);
  margin: 0;
}
.t-h2.is-ink { color: var(--ink); }

/* h3 — bold, red, not uppercase */
.t-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.6;
  color: var(--vega-red);
  margin: 0;
}
.t-h3.is-ink { color: var(--ink); }

.t-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

/* Small uppercase red label sitting above a headline. */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-xwide);
  color: var(--vega-red);
  margin: 0 0 var(--space-4) 0;
}

/* Body copy — note the brand sets running copy LIGHT (300). */
.t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: 1.5;  color: var(--fg-1); }
.t-body    { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body);    line-height: var(--lh-normal); color: var(--fg-1); }
.t-body-sm { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.t-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); letter-spacing: 0.02em; }

/* A heavier intro paragraph the site calls "strong-para". */
.t-body-strong { font-family: var(--font-body); font-weight: 700; font-size: 25px; line-height: 1.6; color: var(--fg-1); }

.t-mono    { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--fg-2); }

/* Inline accent — apply to a span inside a headline to highlight a phrase */
.t-accent { color: var(--vega-red); }
.t-accent-bold { color: var(--vega-red); font-weight: 700; }

/* ============================================================
   RESET-ISH BASE — applied when consumers @import this file
   ============================================================ */
html, body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }