/* File: theme/css/humanspark-tokens.css
 * Purpose: Override Pico CSS defaults with HumanSpark brand tokens.
 * Project: HumanSpark | Date: 2026-03-20
 *
 * Overview: Maps brand colours, typography, and spacing to Pico's
 * CSS custom properties. Also defines --hs-* tokens used by
 * component CSS. Loaded after pico.classless.min.css.
 */

/* --- Pico overrides (light theme) --- */
:root {
  /* Typography */
  --pico-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --pico-font-weight: 500;
  --pico-line-height: 1.6;

  /* Brand colours mapped to Pico tokens */
  --pico-primary: #008384;
  --pico-primary-hover: #006a6b;
  --pico-background-color: #FFFFFF;
  --pico-color: #282828;
  --pico-muted-color: #666666;
  --pico-card-background-color: #FFFFFF;
  --pico-card-border-color: #E0E0E0;
  --pico-card-sectioning-background-color: #F0F0F0;
  --pico-blockquote-border-color: #EEBA00;

  /* HumanSpark brand tokens (used by components) */
  --hs-white: #FFFFFF;
  --hs-navy: #00082A;
  --hs-navy-light: #103A65;
  --hs-accent: #EEBA00;
  --hs-grey: #F0F0F0;
  --hs-text: #282828;
  --hs-text-muted: #666666;
  --hs-link: #008384;
  --hs-link-hover: #006a6b;
  --hs-red: #F2295B;
  --hs-gradient-start: #FFC900;
  --hs-gradient-end: #F2295B;
  --hs-gradient: linear-gradient(to right, #FFC900, #F2295B);

  /* Layout */
  --hs-content-width: 1000px;
  --hs-wide-width: 1100px;

  /* Font weights */
  --hs-weight-logo: 800;
  --hs-weight-heading: 700;
  --hs-weight-body: 500;
  --hs-weight-note: 300;

  /* Hi-tech effect tokens */
  --hs-glow-accent: 0 0 25px rgba(238, 186, 0, 0.35);
  --hs-glow-accent-strong: 0 0 40px rgba(238, 186, 0, 0.55);
  --hs-glow-accent-soft: 0 0 60px rgba(238, 186, 0, 0.15);
  --hs-glow-teal: 0 0 20px rgba(0, 131, 132, 0.2);
  --hs-gradient-subtle: linear-gradient(to right, rgba(255, 201, 0, 0.15), rgba(242, 41, 91, 0.15));
  --hs-gradient-line: linear-gradient(to right, #FFC900, #F2295B);
  --hs-grid-line: rgba(238, 186, 0, 0.1);
  --hs-dot-pattern: radial-gradient(circle, rgba(238, 186, 0, 0.18) 1px, transparent 1px);
  --hs-mesh-gradient: radial-gradient(ellipse at 20% 50%, rgba(16, 58, 101, 0.8) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 20%, rgba(238, 186, 0, 0.15) 0%, transparent 40%),
                      radial-gradient(ellipse at 50% 100%, rgba(0, 131, 132, 0.12) 0%, transparent 50%);
  --hs-card-shadow: 0 4px 24px rgba(0, 8, 42, 0.08);
  --hs-card-shadow-hover: 0 8px 32px rgba(0, 8, 42, 0.15);
}

/* --- Mono font for code and tech accents --- */
code, pre, kbd, samp {
  font-family: 'JetBrains Mono', monospace;
}

/* Mono for stat numbers and badges - subtle tech signal */
.hs-stat__number,
.hs-badge,
.hs-pricing__price,
.hs-tagline {
  font-family: 'JetBrains Mono', monospace;
}

/* --- Heading weights --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--hs-weight-heading);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--font-size-fluid-3); }
h2 { font-size: var(--font-size-fluid-2); }

/* --- Link colour --- */
a {
  color: var(--hs-link);
}
a:hover {
  color: var(--hs-link-hover);
}

/* --- Subtle page load animation --- */
@keyframes hs-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hs-hero h1,
.hs-hero p,
.hs-hero .hs-tagline,
.hs-hero .hs-btn {
  animation: hs-fade-up 0.6s var(--ease-3) both;
}

.hs-hero .hs-tagline { animation-delay: 0.1s; }
.hs-hero h1 { animation-delay: 0.2s; }
.hs-hero p { animation-delay: 0.35s; }
.hs-hero .hs-btn { animation-delay: 0.5s; }