/* ==========================================================================
   LHUPI shared design tokens, academy.lhupi.com edition
   --------------------------------------------------------------------------
   Same file structure as the parent (lhupi.com) tokens.css. Only the
   "ACADEMY THEME" block below differs: light theme, purple accent.

     academy.lhupi.com -> light theme, purple accent (#A855F7)

   Component CSS (main.css) is shared verbatim with the parent site.
   Academy-only tweaks live in academy.css, loaded after main.css.
   ========================================================================== */

: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 */

  /* ---- ACADEMY THEME: LIGHT ---- */
  --color-bg:        #FFFFFF;  /* page background */
  --color-bg-raised: #F7F5FF;  /* lifted panels, very light lavender-white */
  --color-surface:   #FFFFFF;  /* cards */
  --color-line:      #E7E3F7;  /* hairlines, borders */
  --color-text:      #17131F;  /* primary text, near-black violet */
  --color-muted:     #5B5470;  /* secondary text */
  --color-faint:     #8B84A0;  /* tertiary text, captions */

  /* ---- Accent: purple family ----
     Electric violet for fills and highlights; deep violet for anything
     that is text on light (links, eyebrows, small labels) so contrast
     stays safe. Never use the electric violet for small body text. */
  --color-accent:        #A855F7;  /* electric violet: fills, highlights */
  --color-accent-strong: #6D28D9;  /* deep violet: text + links on light */
  --color-accent-ink:    #FFFFFF;  /* text drawn on top of the accent */
  --color-accent-hover:  #9333EA;  /* button hover state */
  --color-accent-soft:   rgba(168, 85, 247, 0.08); /* tinted fills, sparingly */
  --color-tint:          #F3EFFF;  /* pale lavender section backgrounds */
  --color-link:          var(--color-accent-strong);

  /* ---- Logo ----
     Same L construction as the parent. On the light theme the mark keeps
     its near-black disc (cross-site consistency) with a purple ring and
     purple notch. */
  --logo-ring: #A855F7;

  /* ---- Header (light) ---- */
  --color-header-bg: rgba(255, 255, 255, 0.92);

  /* ---- 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;
}