/* ==========================================================================
   LHUPI shared design tokens
   --------------------------------------------------------------------------
   One file, every LHUPI site. The parent site (lhupi.com) uses these values
   as-is. Each unit site reuses this file and overrides ONLY the tokens in
   the "UNIT OVERRIDES" block at the bottom:

     studio.lhupi.com  -> dark theme,  lime accent   (#B8F135)
     try.lhupi.com     -> dark theme,  blue accent   (#4D7CFE)
     academy.lhupi.com -> light theme, purple accent (#A855F7)

   Nothing else in component CSS should hard-code a color, font, or spacing
   value. If you need a new token, add it here with a comment.
   ========================================================================== */

:root {
  /* ---- Brand hues (do not change per site) ---- */
  --lhupi-lime:   #B8F135;  /* parent signature + Studio accent */
  --lhupi-blue:   #4D7CFE;  /* Try LHUPI accent */
  --lhupi-purple: #A855F7;  /* Academy accent */

  /* ---- Theme: DARK (parent, Studio, Try) ---- */
  --color-bg:        #0B0C0E;  /* near-black, never pure black */
  --color-bg-raised: #111417;  /* slightly lifted panels */
  --color-surface:   #161A1F;  /* cards */
  --color-line:      #23282F;  /* hairlines, borders */
  --color-text:      #F3F5F2;  /* primary text */
  --color-muted:     #A8B1B9;  /* secondary text */
  --color-faint:     #6C757E;  /* tertiary text, captions */

  /* ---- Accent (the one brand color of the current site) ---- */
  --color-accent:      var(--lhupi-lime);
  --color-accent-ink:  #141806;  /* text drawn on top of the accent */
  --color-accent-soft: rgba(184, 241, 53, 0.10); /* tinted fills, sparingly */

  /* ---- Logo ---- */
  --logo-ring: #3A3F45;  /* thin neutral graphite ring */

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

  /* Type scale (display is condensed uppercase, body is plain) */
  --text-hero:    clamp(2.6rem, 6vw, 4.5rem);
  --text-h2:      clamp(1.7rem, 3.4vw, 2.5rem);
  --text-h3:      1.25rem;
  --text-lead:    1.2rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.78rem;

  --leading-tight: 1.08;
  --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: 10px;
  --radius-sm: 6px;

  /* ---- Motion (keep it quiet) ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 220ms;
}

/* ==========================================================================
   UNIT OVERRIDES. A unit site keeps everything above and replaces this
   block. Example for academy.lhupi.com (light theme, purple accent):

   :root {
     --color-bg:        #FBFAFF;
     --color-bg-raised: #FFFFFF;
     --color-surface:   #FFFFFF;
     --color-line:      #E7E3F7;
     --color-text:      #17131F;
     --color-muted:     #5B5470;
     --color-faint:     #8B84A0;
     --color-accent:    var(--lhupi-purple);
     --color-accent-ink:#FFFFFF;
     --color-accent-soft: rgba(168, 85, 247, 0.10);
     --logo-ring: #D9D2F2;
   }

   Studio and Try keep the dark theme and only swap --color-accent
   (lime for Studio, blue for Try).
   ========================================================================== */