/* NetStrategy Design System — Colors & Type
   ------------------------------------------------
   Source: Netstrategy Brand Refresh V2 (27 March 2026)
   Typography: Plus Jakarta Sans (Bold / Medium / Regular)
*/

/* Plus Jakarta Sans — licensed brand fonts (static instances, self-hosted)
   One face per weight × style. Weights: 200 ExtraLight · 300 Light · 400 Regular
   · 500 Medium · 600 SemiBold · 700 Bold · 800 ExtraBold (roman + italic). */
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-ExtraLightItalic.ttf") format("truetype"); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-LightItalic.ttf") format("truetype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("fonts/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype"); font-weight:800; font-style:italic; font-display:swap; }

:root {
  /* ——— PRIMARY · Red family ——— (NetStrategy Brand Colours v2.2) */
  --red-bright:   #F51825;   /* Bright accent, CTAs */
  --red-mid:      #DC1429;   /* Mid accent */
  --red-original: #C4132F;   /* Base brand red — wordmark & symbol */
  --red-dark:     #9E0000;   /* Deep red — hover/press, pressure */

  /* ——— SECONDARY ——— */
  --periwinkle:   #8DACFF;   /* Periwinkle blue — soft optimism */
  --indigo-dark:  #010121;   /* Dark indigo — primary text & dark surfaces */

  /* ——— TERTIARY · neutral grays ——— */
  --gray-100:     #D1D1D1;   /* lightest — dividers, hairline borders */
  --gray-200:     #B2B2B2;   /* muted / disabled ink */
  --gray-300:     #6F6F6F;   /* secondary ink */
  --gray-400:     #424242;   /* dark ink (softer than indigo) */

  /* ——— TERTIARY · periwinkle tints ——— */
  --periwinkle-pale:  #D3DFFF;  /* palest — soft surfaces, info backgrounds */
  --periwinkle-light: #A0BBFF;  /* light — accents, hover tints */

  /* ——— NEUTRAL SURFACES ——— */
  --white:        #FFFFFF;
  --paper:        #FAFAFC;   /* Off-white page background */
  --mist:         #F2F3F7;   /* Card / panel fill */

  /* ——— NEUTRAL ALIASES (semantic → tertiary grays) ——— */
  --fog:          var(--gray-100);   /* Hairline borders */
  --cloud:        var(--gray-200);   /* Disabled / muted ink */
  --slate:        var(--gray-300);   /* Secondary ink */
  --graphite:     var(--gray-400);   /* Dark ink (softer than indigo) */

  /* ——— SEMANTIC FOREGROUND ——— */
  --fg-1: var(--indigo-dark);   /* Headlines, primary text */
  --fg-2: var(--graphite);      /* Body */
  --fg-3: var(--slate);          /* Meta, captions */
  --fg-4: var(--cloud);          /* Disabled / placeholder */
  --fg-inverse: var(--white);

  /* ——— SEMANTIC BACKGROUNDS ——— */
  --bg-page:       var(--paper);
  --bg-surface:    var(--white);
  --bg-muted:      var(--mist);
  --bg-dark:       var(--indigo-dark);
  --bg-periwinkle: var(--periwinkle);
  --bg-red:        var(--red-original);

  /* ——— SEMANTIC ACCENT ——— */
  --accent:        var(--red-original);
  --accent-hover:  var(--red-dark);
  --accent-bright: var(--red-bright);

  /* ——— BORDER ——— */
  --border-subtle: var(--fog);
  --border-strong: var(--cloud);
  --border-ink:    var(--indigo-dark);

  /* ——— STATE ——— */
  --success: #1F8A5B;
  --warning: #E7A51A;
  --danger:  var(--red-bright);
  --info:    var(--periwinkle);

  /* ——— TYPE · families ——— */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace;

  /* ——— TYPE · scale (1.25 · major third) ——— */
  --fs-12: 0.75rem;   /* micro / legal */
  --fs-14: 0.875rem;  /* caption */
  --fs-16: 1rem;      /* body */
  --fs-18: 1.125rem;  /* body-lg / intro */
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;    /* h4 */
  --fs-28: 1.75rem;
  --fs-32: 2rem;      /* h3 */
  --fs-40: 2.5rem;    /* h2 */
  --fs-48: 3rem;
  --fs-56: 3.5rem;    /* h1 */
  --fs-72: 4.5rem;
  --fs-96: 6rem;      /* display */

  /* ——— TYPE · weight ——— */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ——— TYPE · line-height ——— */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.35;
  --lh-relaxed: 1.55;

  /* ——— TYPE · tracking (per brand guide v7) ——— */
  --tr-display:   -0.03em;   /* 48px+ : -2.5% to -3% */
  --tr-headline:  -0.012em;  /* 24-40px : -1% to -1.5% */
  --tr-body:       0;         /* 14-18px : default */
  --tr-eyebrow:    0.12em;    /* ALL CAPS 11-12px : +10% to +14% */
  /* legacy aliases */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.012em;
  --tr-wide:    0.06em;

  /* ——— RADII ——— */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ——— SPACING (4pt) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ——— SHADOWS — soft, contemporary ——— */
  --shadow-xs: 0 1px 2px rgba(1,1,33,0.04);
  --shadow-sm: 0 2px 6px rgba(1,1,33,0.06), 0 1px 2px rgba(1,1,33,0.04);
  --shadow-md: 0 8px 20px rgba(1,1,33,0.08), 0 2px 4px rgba(1,1,33,0.04);
  --shadow-lg: 0 20px 48px rgba(1,1,33,0.12), 0 4px 10px rgba(1,1,33,0.04);
  --shadow-red: 0 12px 28px rgba(196,19,47,0.28);

  /* ——— MOTION ——— */
  --ease-out: cubic-bezier(0.2, 0.7, 0.15, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ——— SEMANTIC TYPE ROLES ——— */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.intro, p.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.caption, small {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}