/* ==========================================================================
   LHUPI shared design tokens - TRY LHUPI edition
   --------------------------------------------------------------------------
   Same system as lhupi.com. Dark navy theme, electric blue accent (#4D7CFE).
   ========================================================================== */

:root {
  /* ---- Brand hues (do not change per site) ---- */
  --lhupi-lime:   #B8F135;
  --lhupi-blue:   #4D7CFE;  /* Try LHUPI accent */
  --lhupi-purple: #A855F7;
  --lhupi-blue-glow: #8FA8FF; /* lighter blue for glows */

  /* ---- Theme: DARK navy ---- */
  --color-bg:        #05070F;  /* deep navy-black */
  --color-bg-raised: #0A0E1C;  /* lifted panels */
  --color-surface:   #0D1326;  /* cards */
  --color-line:      #1B2545;  /* hairlines, borders */
  --color-text:      #F2F5FF;  /* primary text */
  --color-muted:     #9AA6C7;  /* secondary text */
  --color-faint:     #5C6684;  /* tertiary text, captions */

  /* ---- Accent ---- */
  --color-accent:      var(--lhupi-blue);
  --color-accent-ink:  #FFFFFF;  /* text drawn on top of the accent */
  --color-accent-soft: rgba(77, 124, 254, 0.10);

  /* ---- Logo ---- */
  --logo-ring: #2A3560;  /* blue-tinted ring */

  /* ---- Typography ---- */
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-hero:    clamp(2.8rem, 7vw, 5.2rem);
  --text-h2:      clamp(1.8rem, 3.6vw, 2.6rem);
  --text-h3:      1.25rem;
  --text-lead:    1.2rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.78rem;

  --leading-tight: 1.06;
  --leading-body: 1.65;

  /* ---- Spacing ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* ---- Layout ---- */
  --max-width: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-sm: 8px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 240ms;

  /* ---- Glow ---- */
  --glow: 0 0 24px rgba(77, 124, 254, 0.35);
  --glow-strong: 0 0 48px rgba(77, 124, 254, 0.5);
}