/* ==========================================================================
   Innovo Networks · Fonts
   Brand typeface: Open Sans / Open Sans Bold (per Brand Manual, p.4)
   Open Sans is published on Google Fonts as a variable font (300–800 + italic).
   Consumers with network access get the exact brand face from this @import.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* JetBrains Mono is used only for code / IP / port / config specimens in
   product UIs (cyber tooling). Swap-safe monospace, flagged as a support face. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ==========================================================================
   Innovo Networks · Colour tokens
   Source of truth: Brand Manual p.4 "Colour Scheme"
     Innovo Green  #BED62F   RGB 190 214 47   CMYK 30 0 100 0
     Grey          #808284   RGB 128 130 132  CMYK 0 0 0 60
     Navy (ink)    #081926   RGB 8 25 38      CMYK 89 75 56 71
     White         #FFFFFF
   Ramps below are derived from these four anchors. The four manual values
   are tagged @brand and must never be edited.
   ========================================================================== */

:root {
  /* --- Innovo Green (primary brand accent) ----------------------------- */
  --green-50:  #f7fae9;
  --green-100: #eef4cf;
  --green-200: #e1eca6;
  --green-300: #d2e273;
  --green-400: #c8dc4d;
  --green-500: #bed62f;   /* @brand — Innovo Green */
  --green-600: #a4bc1e;   /* hover / pressed on light */
  --green-700: #849818;
  --green-800: #636f16;
  --green-900: #434a13;

  /* --- Navy / Ink (primary brand dark + UI text) ----------------------- */
  --navy-950: #050f18;
  --navy-900: #081926;    /* @brand — Innovo Navy */
  --navy-800: #102a3c;
  --navy-700: #1a3a50;
  --navy-600: #295067;
  --navy-500: #3a6680;

  /* --- Neutral grey (anchored on manual grey #808284) ------------------ */
  --grey-50:  #f5f6f7;
  --grey-100: #eaecee;
  --grey-200: #dadce0;
  --grey-300: #c3c6c9;
  --grey-400: #a1a4a8;
  --grey-500: #808284;    /* @brand — Innovo Grey */
  --grey-600: #65686b;
  --grey-700: #4b4e52;
  --grey-800: #34373b;
  --grey-900: #1f2226;

  /* --- Pure ------------------------------------------------------------ */
  --white: #ffffff;       /* @brand */
  --black: #000000;

  /* --- Semantic status (muted so the lime stays the hero) -------------- */
  --info-500:    #2a9bc4;  /* cyan — Connect / Cloud / Cyber tech accent */
  --info-50:     #e7f4f9;
  --success-500: #4cae6e;
  --success-50:  #e8f5ee;
  --warning-500: #e2a93b;
  --warning-50:  #fbf2e0;
  --danger-500:  #d5523e;
  --danger-50:   #fbe9e6;
}
/* ==========================================================================
   Innovo Networks · Typography tokens
   Type family: Open Sans (brand). Bold (700) for headlines, per manual.
   ========================================================================== */

:root {
  /* Families */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Type scale — 1.250 major-third, base 16px ------------------------- */
  --fs-display: 4.2rem;   /* 67px — hero */
  --fs-h1:      3.0rem;   /* 48px */
  --fs-h2:      2.25rem;  /* 36px */
  --fs-h3:      1.75rem;  /* 28px */
  --fs-h4:      1.375rem; /* 22px */
  --fs-lg:      1.125rem; /* 18px */
  --fs-body:    1rem;     /* 16px */
  --fs-sm:      0.875rem; /* 14px */
  --fs-xs:      0.75rem;  /* 12px */
  --fs-eyebrow: 0.8125rem;/* 13px — uppercase label */

  /* Line heights */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.2; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-snug:    -0.01em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.04em; /* @kind font */
  --ls-eyebrow: 0.14em; /* @kind font */
}
/* ==========================================================================
   Innovo Networks · Spacing, radius, elevation, motion, layout
   8px base grid.
   ========================================================================== */

:root {
  /* Spacing scale (8px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radius — Innovo uses crisp, lightly-softened corners (tech, precise) */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* Elevation — cool, low-spread shadows tinted with the navy ink */
  --shadow-xs: 0 1px 2px rgba(8, 25, 38, 0.06);
  --shadow-sm: 0 1px 3px rgba(8, 25, 38, 0.08), 0 1px 2px rgba(8, 25, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(8, 25, 38, 0.10), 0 2px 4px rgba(8, 25, 38, 0.06);
  --shadow-lg: 0 12px 28px rgba(8, 25, 38, 0.14), 0 4px 8px rgba(8, 25, 38, 0.08);
  --shadow-xl: 0 24px 56px rgba(8, 25, 38, 0.20);
  --shadow-green: 0 8px 24px rgba(190, 214, 47, 0.35);  /* green CTA glow */

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Layout */
  --container:    1200px;
  --container-wide: 1320px;
  --gutter:       clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
}
/* ==========================================================================
   Innovo Networks · Semantic colour aliases
   Map raw ramp values to roles. Components reference ONLY these.
   ========================================================================== */

:root {
  /* Brand */
  --brand-primary:        var(--green-500);
  --brand-primary-hover:  var(--green-600);
  --brand-primary-press:  var(--green-700);
  --brand-ink:            var(--navy-900);
  --brand-accent:         var(--info-500);

  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--grey-800);
  --text-muted:    var(--grey-600);
  --text-subtle:   var(--grey-500);
  --text-inverse:  var(--white);
  --text-on-green: var(--navy-900);   /* green is light → navy text */
  --text-link:     var(--green-700);

  /* Surfaces */
  --surface-page:    var(--grey-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--grey-100);
  --surface-inverse: var(--navy-900);
  --surface-inverse-2: var(--navy-800);

  /* Borders / lines */
  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-400);
  --border-inverse: rgba(255, 255, 255, 0.14);
  --focus-ring:     var(--green-500);

  /* Status */
  --status-info:    var(--info-500);
  --status-info-bg: var(--info-50);
  --status-success: var(--success-500);
  --status-success-bg: var(--success-50);
  --status-warning: var(--warning-500);
  --status-warning-bg: var(--warning-50);
  --status-danger:  var(--danger-500);
  --status-danger-bg: var(--danger-50);
}
/* ==========================================================================
   Innovo Networks · Base layer
   Sensible element defaults wired to tokens. Ships to consumers via styles.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

strong, b { font-weight: var(--fw-bold); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

img, svg, video { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--green-300); color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

/* --- Brand helper classes used across cards & kits ----------------------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.text-accent { color: var(--green-700); }
.on-dark { color: var(--text-inverse); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text-inverse); }