/* ==========================================================================
   Ask For Helping Hand — Design Tokens
   Visual system matched to konnectx.net (extracted from its live computed
   styles): Plus Jakarta Sans, #1f7dfb blue, #000034 navy, #1dddf1 cyan,
   #f4f7fc surfaces, pill-dominant radii.

   Values are konnectx's own @theme tokens (navy/azure/cyan/ink/mist/line),
   taken from its globals.css rather than guessed.

   One rule konnectx does not enforce: its azure #1f7dfb measures 3.90:1 on
   white, fine behind large bold button text but failing AA for normal-size
   text. Links and small copy therefore use konnectx's azure-600 #0d63e6
   (5.32:1). Both are konnectx values; we just pick per context.

   Re-skinning the brand means editing THIS FILE ONLY.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ======================================================================
     1. PALETTE
     ====================================================================== */

  /* Blue — konnectx brand hue (214°) */
  --blue-50:  #eef5ff;
  --blue-100: #d9e8ff;
  --blue-200: #b9d5ff;
  --blue-300: #7fb2ff;   /* konnectx azure-300 */
  --blue-400: #559aff;
  --blue-500: #1f7dfb;   /* konnectx exact — large/bold use only */
  --blue-600: #0d63e6;   /* konnectx azure-600 — 5.32:1 on white */
  --blue-700: #0355c2;
  --blue-800: #06459b;
  --blue-900: #0a3a7a;
  --navy:     #000034;   /* konnectx exact */
  --navy-700: #0a0a47;   /* konnectx exact */
  --navy-600: #14146a;   /* konnectx exact */

  /* Cyan — konnectx accent. Very light: only ever on navy, never
     under white text (white on cyan is 1.66:1). */
  --cyan-200: #a8f2fa;
  --cyan-300: #5ce8f6;
  --cyan-400: #1dddf1;   /* konnectx exact */
  --cyan-500: #0bbdd1;
  --cyan-600: #0a97a8;

  /* Neutrals — konnectx's cool blue-grey family */
  --n-0:   #ffffff;
  --n-50:  #f4f7fc;      /* konnectx exact — section fill */
  --n-100: #eaeff7;
  --n-200: #e5eaf3;      /* konnectx exact — borders */
  --n-300: #cdd5e3;
  --n-400: #9aa4b8;
  --n-500: #5b6478;      /* konnectx exact — muted text */
  --n-600: #454d5f;
  --n-700: #2e3647;
  --n-800: #1a2133;
  --n-900: #0a0e1f;      /* konnectx exact — body ink */

  /* Status */
  --green-100: #dcf7e6;
  --green-600: #0f8a46;
  --green-700: #0a6834;
  --red-100:   #ffe6e4;
  --red-600:   #d12d20;
  --red-700:   #a32018;
  --amber-100: #fff2d6;
  --amber-500: #e09400;
  --amber-700: #9a6300;

  /* ======================================================================
     2. SEMANTIC COLOUR
     ====================================================================== */
  --surface:         var(--n-0);
  --surface-sunken:  var(--n-50);
  --surface-raised:  var(--n-0);
  --surface-inverse: var(--navy);
  --surface-accent:  var(--blue-50);

  --text:             var(--n-900);
  --text-muted:       var(--n-500);
  --text-subtle:      var(--n-400);
  --text-on-dark:     var(--n-0);
  --text-on-dark-mut: #aab4cc;
  --text-brand:       var(--blue-600);

  --border:         var(--n-200);
  --border-strong:  var(--n-300);
  --border-brand:   var(--blue-200);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Brand fill — konnectx's bright blue. Only ever carries large bold
     text (buttons are 16px/700+ at 48px tall), where 3.90:1 clears the
     3:1 bar for large text and UI components. */
  --brand:        var(--blue-500);
  --brand-hover:  var(--blue-600);
  --brand-active: var(--blue-700);
  --brand-fg:     var(--n-0);

  /* Accent — cyan. Pills, ticks, stat figures on navy. Never a text
     colour on white. */
  --accent:    var(--cyan-400);
  --accent-fg: var(--navy);

  --success:    var(--green-600);
  --success-bg: var(--green-100);
  --danger:     var(--red-600);
  --danger-bg:  var(--red-100);
  --warn:       var(--amber-700);
  --warn-bg:    var(--amber-100);

  --focus-ring: var(--blue-600);

  /* ======================================================================
     3. TYPOGRAPHY — Plus Jakarta Sans throughout, IBM Plex Mono for code
     ====================================================================== */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px — konnectx's secondary size */
  --fs-base: 1rem;       /* 16px — konnectx's body size */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   clamp(1.25rem, 0.5vw + 1.15rem, 1.375rem);
  --fs-2xl:  clamp(1.5rem, 1vw + 1.3rem, 1.875rem);
  --fs-3xl:  clamp(1.875rem, 1.8vw + 1.45rem, 2.25rem);   /* 36px — section heads */
  --fs-4xl:  clamp(2.25rem, 3vw + 1.5rem, 3rem);
  --fs-5xl:  clamp(2.5rem, 4.5vw + 1.4rem, 3.75rem);      /* 60px — hero h1 */
  --fs-phone: clamp(1.75rem, 2.6vw + 1.2rem, 2.5rem);

  --lh-tight:   1.08;    /* konnectx h1: 64.8 / 60 */
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --ls-hero:   -0.025em; /* konnectx h1: -1.5px / 60px */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.011em;
  --ls-normal: 0;
  --ls-wide:   0.14em;   /* konnectx eyebrows are widely tracked */

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

  /* ======================================================================
     4. SPACE
     ====================================================================== */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(3.5rem, 6vw, 6rem);
  --gutter:    clamp(1rem, 4vw, 2rem);
  --measure:   66ch;
  --container: 1200px;
  --container-narrow: 820px;

  /* ======================================================================
     5. RADIUS / SHADOW / MOTION — konnectx leans heavily on pills
     ====================================================================== */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-3xl:  28px;
  --r-full: 9999px;

  --sh-xs: 0 1px 2px rgba(10, 14, 31, 0.05);
  --sh-sm: 0 1px 3px rgba(10, 14, 31, 0.07), 0 1px 2px rgba(10, 14, 31, 0.04);
  --sh-md: 0 4px 14px rgba(10, 14, 31, 0.07), 0 2px 5px rgba(10, 14, 31, 0.04);
  --sh-lg: 0 12px 32px rgba(10, 14, 31, 0.09), 0 4px 10px rgba(10, 14, 31, 0.04);
  --sh-xl: 0 24px 56px rgba(10, 14, 31, 0.12), 0 8px 18px rgba(10, 14, 31, 0.05);
  --sh-brand: 0 8px 24px rgba(31, 125, 251, 0.32);
  /* konnectx exact */
  --sh-card: 0 1px 2px rgba(10, 14, 31, 0.04), 0 12px 32px -12px rgba(10, 14, 31, 0.18);
  --sh-glow: 0 0 0 1px rgba(31, 125, 251, 0.25), 0 18px 50px -12px rgba(31, 125, 251, 0.55);

  /* konnectx hero-soft — the light radial wash behind every page header */
  --hero-soft: radial-gradient(120% 130% at 50% -10%, #e9f2ff 0%, #f6f9ff 45%, #ffffff 80%);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --ease:     cubic-bezier(0.2, 0, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-base: 1; --z-sticky: 50; --z-header: 100; --z-modal: 500;
}

/* ==========================================================================
   DARK MODE — konnectx ships light only; this is a courtesy mapping for
   users whose OS asks for dark. Navy becomes the page, not just a band.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:         #080b18;
    --surface-sunken:  #05070f;
    --surface-raised:  #121728;
    --surface-inverse: #000034;
    --surface-accent:  #0d1b35;

    --text:             #eef1f8;
    --text-muted:       #9aa4b8;
    --text-subtle:      #6c7689;
    --text-brand:       var(--blue-300);

    --border:        #1e2740;
    --border-strong: #2c3650;
    --border-brand:  var(--blue-800);

    --brand:        var(--blue-500);
    --brand-hover:  var(--blue-400);
    --brand-active: var(--blue-300);
    --brand-fg:     var(--n-0);

    --success:    #4ade80;
    --success-bg: #0b2a1a;
    --danger:     #f87171;
    --danger-bg:  #2d1211;
    --warn:       #fbbf24;
    --warn-bg:    #2b1f06;

    --sh-xs: 0 1px 2px rgba(0,0,0,0.4);
    --sh-sm: 0 1px 3px rgba(0,0,0,0.45);
    --sh-md: 0 4px 14px rgba(0,0,0,0.5);
    --sh-lg: 0 12px 32px rgba(0,0,0,0.55);
    --sh-xl: 0 24px 56px rgba(0,0,0,0.6);
  }
}

:root[data-theme="dark"] {
  --surface:         #080b18;
  --surface-sunken:  #05070f;
  --surface-raised:  #121728;
  --surface-inverse: #000034;
  --surface-accent:  #0d1b35;
  --text:            #eef1f8;
  --text-muted:      #9aa4b8;
  --text-subtle:     #6c7689;
  --text-brand:      var(--blue-300);
  --border:          #1e2740;
  --border-strong:   #2c3650;
  --border-brand:    var(--blue-800);
  --brand:           var(--blue-500);
  --brand-hover:     var(--blue-400);
  --brand-active:    var(--blue-300);
  --brand-fg:        var(--n-0);
}