/* 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: 400;
  --pico-line-height: var(--hs-leading-tight);

  /* HumanSpark brand tokens */
  --hs-white: #FFFFFF;
  --hs-navy: #00082A;
  --hs-navy-light: #103A65;
  --hs-accent: #EEBA00;
  --hs-grey: #F0F0F0;
  --hs-text: #1a1a1a;
  --hs-text-heading: #111111;
  --hs-text-muted: #64748b;
  --hs-text-faint: #94a3b8;
  --hs-teal: #008384;
  --hs-red: #F2295B;
  --hs-bg-reading: #f7f9fb;
  --hs-accent-dark: #d4a800;
  --hs-accent-subtle: rgba(238, 186, 0, 0.18);
  --hs-border-subtle: rgba(0, 0, 0, 0.08);
  --hs-overlay-light: rgba(255, 255, 255, 0.06);
  --hs-link: var(--hs-teal);
  --hs-link-hover: #005e5f;

  /* Brand colours mapped to Pico tokens */
  --pico-primary: var(--hs-teal);
  --pico-primary-hover: var(--hs-link-hover);
  --pico-background-color: var(--hs-white);
  --pico-color: var(--hs-text);
  --pico-muted-color: var(--hs-text-muted);
  --pico-card-background-color: var(--hs-white);
  --pico-card-border-color: #d8d8d8;
  --pico-card-sectioning-background-color: var(--hs-grey);
  --pico-blockquote-border-color: #EEBA00;

  /* Gradient tokens */
  --hs-gradient-start: #FFC900;
  --hs-gradient-end: var(--hs-red);
  --hs-gradient: linear-gradient(to right, #FFC900, var(--hs-red));

  /* Border radius */
  --hs-radius: 9px;

  /* Shadows */
  --hs-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
  --hs-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --hs-shadow-heavy: 0 6px 16px rgba(0, 0, 0, 0.2);

  /* Card tokens */
  --hs-card-radius: 12px;
  --hs-card-shadow: var(--hs-shadow-subtle);
  --hs-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --hs-card-padding: clamp(var(--size-4), 3vw, var(--size-5));
  --hs-card-border-width: 4px;
  --hs-card-border-color: var(--hs-accent);

  /* Transitions */
  --hs-speed-fast: 0.15s;
  --hs-speed-normal: 0.2s;

  /* Translucent overlays */
  --hs-white-subtle: rgba(255, 255, 255, 0.06);
  --hs-accent-faint: rgba(238, 186, 0, 0.06);

  /* Layout */
  --hs-content-width: 1000px;
  --hs-reading-width: 680px;

  /* Spacing scale — semantic wrappers over Open Props --size-* */
  --hs-space-xs: var(--size-1);   /* 0.25rem — badges, tight gaps */
  --hs-space-sm: var(--size-2);   /* 0.5rem  — meta, icons, small gaps */
  --hs-space-md: var(--size-3);   /* 1rem    — standard padding/gap */
  --hs-space-lg: var(--size-4);   /* 1.25rem — card padding, heading margins */
  --hs-space-xl: var(--size-5);   /* 1.5rem  — generous padding */

  /* Section padding — 3 tiers replace 9 individual clamp() values */
  --hs-section-pad-compact:  clamp(1.75rem, 4vw, 2.75rem);
  --hs-section-pad-standard: clamp(2.5rem, 5vw, 3.75rem);
  --hs-section-pad-spacious: clamp(2.5rem, 5vw, 4rem);

  /* Font weights */
  --hs-weight-logo: 800;
  --hs-weight-heading: 800;
  --hs-weight-body: 400;
  --hs-weight-note: 350;

  /* Typography scale — font-size */
  --hs-text-2xs:   0.6rem;   /* tiny badges */
  --hs-text-xs:    0.72rem;  /* legal, footer, sidebar headings, meta */
  --hs-text-sm:    0.78rem;  /* readmore, topbar, footer tagline */
  --hs-text-base:  0.85rem;  /* nav, process text, blog card body */
  --hs-text-md:    0.93rem;  /* CTA list items, contact hint */
  --hs-text-lg:    1.05rem;  /* post content body */
  --hs-text-xl:    1.12rem;  /* lead paragraphs */

  /* Typography scale — letter-spacing */
  --hs-tracking-tight:  -0.032em;  /* display headings, stat numbers */
  --hs-tracking-snug:   -0.016em;  /* section headings, card titles */
  --hs-tracking-wide:    0.06em;   /* uppercase labels, badges, taglines */
  --hs-tracking-wider:   0.10em;   /* small column headers, stat labels */

  /* Typography scale — line-height */
  --hs-leading-tight:   1.3;  /* UI text, cards, labels */
  --hs-leading-normal:  1.4;  /* long-form reading content */

  /* Warm white for light section backgrounds */
  --hs-warm-white: #F0F0F0;

  /* Gradient line for accent borders */
  --hs-gradient-line: linear-gradient(to right, #FFC900, var(--hs-red));

  /* Dark section text colours */
  --hs-dark-text: rgba(255, 255, 255, 0.92);
  --hs-dark-text-muted: rgba(200, 215, 230, 0.65);
  --hs-dark-text-faint: rgba(200, 215, 230, 0.45);
}

/* --- 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 styles --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--hs-text-heading);
}

h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.034em;
  line-height: 1.06;
  margin: 1.2rem 0 0.65rem;
}
h2 {
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin: 1.7rem 0 0.65rem;
}
h3 {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.016em;
  line-height: 1.18;
  margin: 1.2rem 0 0.42rem;
}
h4 {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.22;
  margin: 1.15rem 0 0.42rem;
}

/* Gold emphasis in headings - for manual use via <em> in headings */
h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--hs-accent);
}

/* Lighter weight for descriptive/meta text */
.hs-text-light {
  font-weight: var(--hs-weight-note);
}

/* --- Body text refinement --- */
p {
  margin: 0.55rem 0;
  line-height: var(--hs-leading-tight);
}

strong {
  font-weight: 700;
  color: var(--hs-text-heading);
}

blockquote {
  border-left: 3px solid var(--hs-accent);
  font-style: italic;
  background: linear-gradient(135deg, rgba(247, 249, 251, 0.85) 0%, var(--hs-white) 100%);
  border-radius: 0 var(--hs-radius) var(--hs-radius) 0;
}

/* --- Link colour --- */
a {
  color: var(--hs-link);
  transition: color 0.14s var(--ease-3);
}
a:hover {
  color: var(--hs-link-hover);
}

/* Content links - subtle underline animation */
.hs-section:not(.hs-section--dark) p a,
.hs-section:not(.hs-section--dark) li a:not(.hs-btn) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(0, 131, 132, 0.16);
  transition: color 0.14s var(--ease-3), text-decoration-color 0.14s var(--ease-3);
}

.hs-section:not(.hs-section--dark) p a:hover,
.hs-section:not(.hs-section--dark) li a:not(.hs-btn):hover {
  text-decoration-color: var(--hs-link-hover);
}

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

/* Only animate when the user hasn't requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hs-hero h1,
  .hs-hero p,
  .hs-hero .hs-tagline,
  .hs-hero .hs-btn {
    animation: hs-fade-up 0.38s var(--ease-3) both;
  }

  .hs-hero .hs-tagline { animation-delay: 0.02s; }
  .hs-hero h1 { animation-delay: 0.08s; }
  .hs-hero p { animation-delay: 0.16s; }
  .hs-hero .hs-btn { animation-delay: 0.24s; }
}

/* Reduced motion: show content immediately with no animation */
@media (prefers-reduced-motion: reduce) {
  .hs-hero h1,
  .hs-hero p,
  .hs-hero .hs-tagline,
  .hs-hero .hs-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Selection colour --- */
::selection {
  background: rgba(238, 186, 0, 0.2);
  color: var(--hs-navy);
}

.hs-section--dark ::selection {
  background: rgba(238, 186, 0, 0.3);
  color: var(--hs-white);
}

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Focus visible styling --- */
:focus-visible {
  outline: 2px solid var(--hs-accent);
  outline-offset: 3px;
  border-radius: 3px;
}