/* =========================================================
   ValueHuman Design System — Colors & Type
   Brand: ValueHuman AI · Bridging Human & AI
   Ecosystem: ProFamily AI (Family Operating System)
   ========================================================= */

/* ---------- Fonts ---------- */
/* Brand font: Poppins (uploaded). Two weights provided — Medium (500) for
   body & UI, ExtraBold (800) for headlines. Geist Mono kept (Google Fonts)
   for code/commands since the brand kit does not include a monospaced face. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Poppins-ExtraBold.ttf") format("truetype");
}
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* =========================================================
     COLOR — BRAND PRIMITIVES
     Pulled directly from the ValueHuman logo gradient.
     "Human" side is cool blue; "AI" side warms from orange
     through coral into magenta and purple. The arch/bridge
     between them is the system's organizing metaphor.
     ========================================================= */

  /* Human (cool) side */
  --vh-blue-50:  #EAF4FC;
  --vh-blue-100: #C9E2F7;
  --vh-blue-200: #8FC3EC;
  --vh-blue-300: #4FA1DD;
  --vh-blue-400: #2E8AD0;
  --vh-blue-500: #1F70C1;   /* Brand Blue — "Human" */
  --vh-blue-600: #185DA4;
  --vh-blue-700: #134A82;
  --vh-blue-800: #0F3865;
  --vh-blue-900: #0A2647;

  /* AI (warm) spectrum */
  --vh-orange-50:  #FFF1E8;
  --vh-orange-300: #FFB07A;
  --vh-orange-500: #F26B3A;   /* Brand Orange — "Value" */
  --vh-orange-600: #D8521F;

  --vh-coral-500:  #FF7A52;

  --vh-magenta-50:  #FCE7F0;
  --vh-magenta-300: #F08DBA;
  --vh-magenta-500: #E0337F;  /* Brand Magenta */
  --vh-magenta-600: #BC205F;

  --vh-purple-50:  #F2E7FB;
  --vh-purple-300: #B17DDD;
  --vh-purple-500: #7929B6;   /* Brand Purple */
  --vh-purple-600: #5F1B96;
  --vh-purple-700: #461478;

  /* Neutrals — slightly warm gray, "humane" */
  --vh-ink-0:   #FFFFFF;
  --vh-ink-25:  #FBF9F7;     /* paper, app background */
  --vh-ink-50:  #F4F2EE;     /* subtle surface */
  --vh-ink-100: #E9E6E0;     /* hairline, divider strong */
  --vh-ink-200: #D2CEC6;
  --vh-ink-300: #A9A49A;
  --vh-ink-400: #7E7970;
  --vh-ink-500: #5A554D;
  --vh-ink-600: #3D3934;
  --vh-ink-700: #25221F;
  --vh-ink-800: #15130F;     /* text on light */
  --vh-ink-900: #0B0907;

  /* Semantic */
  --vh-success: #1F8A5B;
  --vh-warning: #E0A23A;
  --vh-danger:  #C73E3E;
  --vh-info:    var(--vh-blue-500);

  /* =========================================================
     COLOR — PRODUCT PILLARS
     Each ProFamily pillar owns one accent. Used for nav
     dots, product cards, illustration tints, badges.
     ========================================================= */
  --pfl-color:   var(--vh-blue-500);     /* Life     — daily ops, cool blue */
  --pfk-color:   var(--vh-orange-500);   /* Kids     — warm orange */
  --pfc-color:   var(--vh-purple-500);   /* Career   — deep purple */
  --pfm-color:   #1F8A5B;                /* Money    — trust green */
  --pfmem-color: var(--vh-magenta-500);  /* Memory   — warm magenta, the heart layer */

  --pfl-tint:    #EAF4FC;
  --pfk-tint:    #FFF1E8;
  --pfc-tint:    #F2E7FB;
  --pfm-tint:    #E6F4ED;
  --pfmem-tint:  #FCE7F0;

  /* =========================================================
     COLOR — SEMANTIC TOKENS
     Use these in components — not the primitives.
     ========================================================= */
  --bg:           var(--vh-ink-25);
  --bg-elevated: var(--vh-ink-0);
  --bg-sunken:   var(--vh-ink-50);
  --bg-inverse:  var(--vh-ink-800);

  --fg:          var(--vh-ink-800);   /* primary text */
  --fg-muted:    var(--vh-ink-500);   /* secondary text */
  --fg-subtle:   var(--vh-ink-400);   /* tertiary, captions */
  --fg-on-brand: var(--vh-ink-0);
  --fg-inverse:  var(--vh-ink-25);

  --border:        var(--vh-ink-100);
  --border-strong: var(--vh-ink-200);
  --border-focus:  var(--vh-blue-500);

  --link:        var(--vh-blue-600);
  --link-hover:  var(--vh-blue-700);

  /* Signature gradients — "Bridging Human & AI" */
  --gradient-bridge:
    linear-gradient(90deg,
      var(--vh-blue-500)    0%,
      var(--vh-purple-500) 45%,
      var(--vh-magenta-500) 72%,
      var(--vh-orange-500) 100%);

  --gradient-ai:
    linear-gradient(135deg,
      var(--vh-orange-500) 0%,
      var(--vh-magenta-500) 55%,
      var(--vh-purple-500) 100%);

  --gradient-human:
    linear-gradient(135deg,
      var(--vh-blue-400) 0%,
      var(--vh-blue-700) 100%);

  --gradient-warm-glow:
    radial-gradient(120% 80% at 0% 0%,
      rgba(242,107,58,0.18) 0%,
      rgba(224,51,127,0.10) 35%,
      rgba(121,41,182,0.05) 60%,
      transparent 80%);

  /* =========================================================
     TYPE — FAMILIES
     Brand font: Poppins (uploaded). Two weights ship with the
     identity: Medium (500) for body & UI, ExtraBold (800) for
     display. Both display and text use the same family — the
     weight contrast carries the hierarchy.
     Mono: Geist Mono — for code, commands, /slash inputs.
     ========================================================= */
  --font-display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-text:    "Poppins", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE SCALE — base 16px, ratio ~1.25 with display jumps */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;
  --fs-6xl:  96px;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.12em;

  /* =========================================================
     SPACING — 4px grid
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =========================================================
     RADII — generous but never pillow-y. Pills only on chips.
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — soft, layered, warm.
     ========================================================= */
  --shadow-xs:  0 1px 2px rgba(15, 19, 25, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 19, 25, 0.06), 0 1px 2px rgba(15, 19, 25, 0.04);
  --shadow-md:  0 6px 18px -8px rgba(15, 19, 25, 0.12), 0 2px 6px rgba(15, 19, 25, 0.04);
  --shadow-lg:  0 20px 40px -16px rgba(15, 19, 25, 0.18), 0 6px 14px -6px rgba(15, 19, 25, 0.08);
  --shadow-xl:  0 32px 64px -24px rgba(15, 19, 25, 0.28), 0 10px 24px -10px rgba(15, 19, 25, 0.10);
  --shadow-glow-warm: 0 12px 40px -12px rgba(224, 51, 127, 0.45);
  --shadow-glow-cool: 0 12px 40px -12px rgba(31, 112, 193, 0.45);

  /* Inset (for inputs / pressed) */
  --shadow-inset: inset 0 1px 0 rgba(15,19,25,0.04), inset 0 0 0 1px rgba(15,19,25,0.06);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-max: 1240px;
  --container-pad: var(--space-6);
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Use these directly on tags; reach for utility classes only
   when the semantic style doesn't fit.
   ========================================================= */

html { font-family: var(--font-text); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--fg); margin: 0; text-wrap: balance; }

h1 { font-size: var(--fs-5xl); font-weight: 800; line-height: var(--lh-tight);  letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-3xl); font-weight: 800; line-height: var(--lh-snug);   letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-snug);   letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-xl);  font-weight: 800; line-height: var(--lh-snug); }
h5 { font-size: var(--fs-lg);  font-weight: 500; line-height: var(--lh-snug); }
h6 { font-size: var(--fs-md);  font-weight: 800; line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); }

p  { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); margin: 0 0 var(--space-4); text-wrap: pretty; }
small { font-size: var(--fs-sm); color: var(--fg-muted); }

a { color: var(--link); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); text-decoration: underline; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--bg-sunken); padding: 2px 6px; border-radius: var(--radius-xs); border: 1px solid var(--border); }
pre  { background: var(--vh-ink-800); color: var(--vh-ink-25); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); overflow-x: auto; line-height: var(--lh-normal); }
pre code { background: transparent; padding: 0; border: 0; color: inherit; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

::selection { background: var(--vh-magenta-500); color: var(--vh-ink-0); }

/* Utility classes for the design system pages */
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.display-xl { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.text-gradient {
  background: var(--gradient-bridge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}