/* =====================================================================
   NETWOVEN GLOBAL TOKENS: nw-tokens.css (single source of truth)
   v2 - consolidated. All existing token names are kept, so live pages
   keep working.
   Rule: page markup and CSS read tokens only. No raw hex/px values.
   ===================================================================== */

:root {

  /* ---------- Brand ---------- */
  --nw-brand-primary: #1f4ea3;        /* main brand / action colour */
  --nw-brand-primary-hover: #183e84;  /* darker shade of brand primary */
  --nw-brand-blue: #1f6fdb;           /* secondary blue (gradients, accents) */
  --nw-brand-blue-dark: #1558b5;
  --nw-accent-yellow: #ffbd1f;

  /* ---------- Text ---------- */
  --nw-text-heading: #0f172a;
  --nw-text-primary: #334155;
  --nw-text-secondary: #475569;
  --nw-text-muted: #64748b;
  --nw-text-light: #94a3b8;           /* decorative only: fails contrast as text on white */

  /* Text on dark (navy / brand) backgrounds */
  --nw-text-on-dark: #fff;
  --nw-on-navy-text: #cbd5e1;
  --nw-eyebrow-on-dark: #c7dcff;

  /* ---------- Backgrounds ---------- */
  --nw-bg-white: #fff;
  --nw-bg-soft: #f8fafc;
  --nw-bg-subtle: var(--nw-bg-soft);
  --nw-bg-blue-soft: #eff6ff;
  --nw-bg-blue: #f3f8fc;
  --nw-bg-blue-hover: var(--nw-bg-blue);
  --nw-bg-green: #f3f9f3;
  --nw-bg-yellow: #fffbf0;
  --nw-bg-orange: #fef6f3;
  --nw-bg-purple: #f8f4fb;
  --nw-bg-teal: #f3fcfb;
  --nw-bg-rose: #fff7f9;

  /* Dark sections */
  --nw-navy: #0a2a5c;
  --nw-navy-card: #12386f;
  --nw-navy-card-hover: #174581;

  /* ---------- Borders ---------- */
  --nw-border: #e2e8f0;
  --nw-border-light: var(--nw-border);
  --nw-border-blue: #c7dcff;
  --nw-border-green: #c8e6d0;
  --nw-border-purple: #d9cffd;
  --nw-border-orange: #ffd7bf;
  --nw-border-teal: #c8ecea;
  --nw-border-rose: #f5d1dc;
  --nw-border-yellow: #f7e3a1;

  /* ---------- Gradients ---------- */
  --nw-gradient-blue: linear-gradient(180deg, var(--nw-bg-white) 0%, #f3f8ff 100%);
  --nw-gradient-green: linear-gradient(180deg, var(--nw-bg-white) 0%, #f4fbf6 100%);
  --nw-gradient-purple: linear-gradient(180deg, var(--nw-bg-white) 0%, #f8f5ff 100%);
  --nw-gradient-orange: linear-gradient(180deg, var(--nw-bg-white) 0%, #fff8f2 100%);
  --nw-gradient-teal: linear-gradient(180deg, var(--nw-bg-white) 0%, var(--nw-bg-teal) 100%);
  --nw-gradient-rose: linear-gradient(180deg, var(--nw-bg-white) 0%, var(--nw-bg-rose) 100%);
  --nw-gradient-cta: linear-gradient(135deg, var(--nw-brand-primary) 0%, var(--nw-navy) 100%);
  --nw-gradient-text: linear-gradient(90deg, var(--nw-brand-primary), var(--nw-brand-blue));

  /* ---------- Status and icon colours ---------- */
  --nw-warn-label: #8a3a10;
  --nw-warn-value: #b5410f;
  --nw-score-amber: #b26200;
  --nw-icon-red: #dc2626;
  --nw-icon-purple: #9333ea;
  --nw-icon-orange: #ea580c;

  /* ---------- Focus ---------- */
  --nw-focus-ring: var(--nw-brand-primary);   /* light sections: 7.9:1 on white */
  --nw-focus-ring-on-dark: #fff;              /* navy + brand sections */
  --nw-focus-ring-soft: color-mix(in srgb, var(--nw-brand-primary) 18%, transparent);

  /* ---------- Background glows (hero) ---------- */
  --nw-glow-blue: rgba(59, 130, 246, .05);
  --nw-glow-purple: rgba(139, 92, 246, .05);

  /* ---------- Form fields ---------- */
  --nw-input-bg: var(--nw-bg-white);
  --nw-input-text: var(--nw-text-heading);
  --nw-input-border: #dce3ed;
  --nw-input-border-focus: var(--nw-brand-primary);
  --nw-input-placeholder: var(--nw-text-light);
  --nw-input-height: 48px;

  /* ---------- Shadows ---------- */
  --nw-shadow-soft: 0 4px 14px #0000000f;
  --nw-shadow-card: 0 8px 24px #00000014;
  --nw-shadow-blue: 0 6px 18px #155ab640;
  --nw-shadow-hero: 0 24px 60px rgb(0 0 0 / 11%);
  --nw-shadow-hero-hover: 0 32px 80px rgba(15, 23, 42, .18);
  --nw-shadow-on-dark: 0 20px 40px rgba(0, 0, 0, .15);

  /* ---------- Radius ---------- */
  --nw-radius-small: 7px;     /* inputs, tags */
  --nw-radius: 10px;          /* stats, pills */
  --nw-radius-md: 14px;       /* cards, buttons */
  --nw-radius-large: 16px;    /* icon tiles */
  --nw-radius-xl: 18px;       /* form card */
  --nw-radius-pill: 999px;    /* badges, step numbers */

  /* ---------- Spacing (4px grid) ---------- */
  --nw-space-1: 4px;
  --nw-space-2: 8px;
  --nw-space-3: 12px;
  --nw-space-4: 16px;
  --nw-space-5: 20px;
  --nw-space-6: 24px;
  --nw-space-7: 28px;
  --nw-space-8: 32px;
  --nw-space-10: 40px;
  --nw-space-12: 48px;
  --nw-space-14: 56px;
  --nw-space-18: 72px;
  --nw-space-20: 80px;

  /* Spacing by role (use these first) */
  --nw-section-pad-y: var(--nw-space-20);
  --nw-section-pad-x: var(--nw-space-6);
  --nw-hero-pad-y: var(--nw-space-14);
  --nw-section-head-gap: var(--nw-space-12);
  --nw-card-pad: var(--nw-space-7);
  --nw-card-pad-sm: var(--nw-space-5);
  --nw-grid-gap: var(--nw-space-5);
  --nw-col-gap: var(--nw-space-12);

  /* ---------- Layout ---------- */
  --nw-container: 1240px;
  --nw-container-text: 760px;
  --nw-scroll-offset: 120px;

  /* ---------- Motion ---------- */
  --nw-ease: cubic-bezier(.4, 0, .2, 1);
  --nw-duration: .28s;
  --nw-transition: var(--nw-duration) var(--nw-ease);
  --nw-lift: -4px;              /* cards */
  --nw-lift-sm: -2px;           /* buttons, stats */
  --nw-lift-lg: -6px;           /* feature cards */

  /* ---------- Typography ---------- */
  /*--nw-font-sans: Inter, 'Segoe UI', system-ui, sans-serif;*/

  --nw-font-sans: 'Segoe UI', sans-serif;

  --nw-fw-regular: 400;
  --nw-fw-medium: 500;
  --nw-fw-semibold: 600;
  --nw-fw-bold: 700;
  --nw-fw-extrabold: 800;

  /* Headings */
  --nw-fs-h1: clamp(34px, 3.8vw, 45px);
  --nw-fs-h2: 32px;
  --nw-fs-h3: 20px;
  --nw-fs-h3-lg: 22px;        /* card titles on dark cards */
  --nw-fs-h4: 18px;
  --nw-fs-h5: 16px;
  --nw-fs-h6: 14px;

  /* Text */
  --nw-fs-stat: 28px;
  --nw-fs-lead: 19px;         /* hero intro */
  --nw-fs-intro: 18px;        /* section intro */
  --nw-fs-emphasis: 17px;
  --nw-fs-body: 16px;         /* paragraphs, list items */
  --nw-fs-body-sm: 15px;
  --nw-fs-small: 14px;
  --nw-fs-label: 13px;        /* eyebrows, labels */
  --nw-fs-caption: 12px;
  --nw-fs-micro: 11px;

  /* Content elements */
  --nw-fs-table: var(--nw-fs-body-sm);
  --nw-fs-quote: var(--nw-fs-intro);

  /* Line height and letter spacing */
  --nw-lh-tight: 1.08;
  --nw-lh-heading: 1.15;
  --nw-lh-compact: 1.55;
  --nw-lh-body: 1.6;
  --nw-lh-loose: 1.8;
  --nw-ls-eyebrow: 1.5px;
  --nw-ls-tag: 1px;

  /* Text rhythm */
  --nw-flow: 1em;                     /* space after paragraphs, lists, tables */
  --nw-list-indent: 1.4em;
  --nw-list-gap: var(--nw-space-2);
  --nw-table-pad-y: var(--nw-space-3);
  --nw-table-pad-x: var(--nw-space-4);

  /* ---------- Components ---------- */
  --nw-btn-height: 48px;
  --nw-btn-pad-y: 14px;
  --nw-btn-pad-x: 22px;
  --nw-btn-radius: var(--nw-radius-md);
  --nw-btn-fs: var(--nw-fs-body);
  --nw-btn-fw: var(--nw-fw-semibold);

  --nw-icon-xs: 16px;
  --nw-icon-sm: 20px;
  --nw-icon-md: 26px;
  --nw-icon-lg: 44px;
  --nw-tile-size: 56px;
  --nw-tile-size-sm: 48px;

  --nw-border-width: 1px;
  --nw-border-width-strong: 2px;
  --nw-border-width-accent: 4px;

  --nw-z-base: 1;
  --nw-z-raised: 10;
  --nw-z-sticky: 100;

  /* Breakpoints (reference only: CSS variables cannot be used inside @media)
     1100px  4-col grids -> 2 col     781px  columns stack, mobile type
      640px  all grids -> 1 col       480px  small phones */
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
  :root {
    /* Type */
    --nw-fs-h1: 34px;
    --nw-fs-h2: 30px;
    --nw-fs-h3-lg: 20px;
    --nw-fs-h4: 17px;
    --nw-fs-lead: 16px;
    --nw-fs-intro: 17px;
    --nw-fs-table: var(--nw-fs-small);

    /* Spacing */
    --nw-section-pad-y: var(--nw-space-14);
    --nw-section-pad-x: var(--nw-space-5);
    --nw-hero-pad-y: var(--nw-space-10);
    --nw-section-head-gap: var(--nw-space-8);
    --nw-card-pad: var(--nw-space-6);
    --nw-col-gap: var(--nw-space-8);
    --nw-table-pad-y: var(--nw-space-2);
    --nw-table-pad-x: var(--nw-space-3);
  }
}

@media (max-width: 480px) {
  :root {
    --nw-fs-stat: 24px;
    --nw-card-pad: var(--nw-space-5);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nw-duration: 0s;
    --nw-lift: 0px;
    --nw-lift-sm: 0px;
    --nw-lift-lg: 0px;
  }
}