@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

/* =====================================================================
   HGN — Design Tokens
   Human Growth Network · product-driven studio
   Brand: teal core (#004447 / #00797f / #82c0c7) + logo accents
   (lime, ember, azure) on warm paper / deep-teal canvas.
   ===================================================================== */

:root {
  /* ---- Brand: teal scale ---- */
  --teal-950: #03191a;
  --teal-900: #04211f;   /* dark canvas */
  --teal-850: #052b28;
  --teal-800: #06302e;   /* ink */
  --teal-700: #004447;   /* brand deep */
  --teal-600: #006065;
  --teal-500: #00797f;   /* brand primary (wordmark) */
  --teal-400: #2a9aa0;
  --teal-300: #82c0c7;   /* light */
  --teal-200: #b6dde0;
  --teal-100: #d9eef0;

  /* ---- Logo accents ---- */
  --lime:   #c4d92e;
  --lime-d: #a7bd1f;
  --ember:  #df7026;   /* SoniVera signature */
  --ember-l:#f2a45a;
  --amber:  #f2b705;
  --azure:  #2f8fcb;   /* OrFlo signature */
  --azure-l:#69b6e6;

  /* ---- Neutrals / paper ---- */
  --paper:    #f7f4ec;   /* warm off-white base */
  --paper-2:  #efe9db;   /* slightly deeper paper */
  --paper-3:  #e7dfcd;
  --white:    #ffffff;
  --ink:      #06302e;   /* primary text on light */
  --ink-soft: #2f4a47;   /* secondary text on light */
  --ink-mute: #556964;   /* muted text on light (>=4.5:1 on paper-2) */
  --line:     rgba(6, 48, 46, 0.12);   /* hairline on light */
  --line-2:   rgba(6, 48, 46, 0.08);

  /* on-dark text */
  --on-dark:        #eef3ec;
  --on-dark-soft:   rgba(238, 243, 236, 0.74);
  --on-dark-mute:   rgba(238, 243, 236, 0.52);
  --line-dark:      rgba(238, 243, 236, 0.16);
  --line-dark-2:    rgba(238, 243, 236, 0.09);

  /* ---- Semantic surface defaults (light theme is default) ---- */
  --bg:        var(--paper);
  --surface:   var(--white);
  --text:      var(--ink);
  --text-soft: var(--ink-soft);
  --text-mute: var(--ink-mute);
  --hairline:  var(--line);
  --accent:    var(--teal-500);
  --accent-ink:var(--teal-700);

  /* ---- Typography ---- */
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Fluid type scale (min 360px → max 1440px) */
  --step--2: clamp(0.69rem, 0.66rem + 0.14vw, 0.79rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.24vw, 1.00rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.33vw, 1.20rem);
  --step-1:  clamp(1.20rem, 1.09rem + 0.55vw, 1.62rem);
  --step-2:  clamp(1.44rem, 1.27rem + 0.86vw, 2.19rem);
  --step-3:  clamp(1.73rem, 1.46rem + 1.31vw, 2.96rem);
  --step-4:  clamp(2.07rem, 1.69rem + 1.94vw, 3.99rem);
  --step-5:  clamp(2.49rem, 1.92rem + 2.83vw, 5.39rem);
  --step-6:  clamp(2.99rem, 2.17rem + 4.07vw, 7.28rem);
  --step-7:  clamp(3.58rem, 2.41rem + 5.83vw, 9.83rem);

  --leading-tight: 1.02;
  --leading-snug: 1.12;
  --leading-head: 1.06;
  --leading-body: 1.62;
  --tracking-eyebrow: 0.22em;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --section-y: clamp(5rem, 3.5rem + 7vw, 11rem);

  /* ---- Layout ---- */
  --container: 76rem;       /* 1216px */
  --container-wide: 86rem;  /* 1376px */
  --container-narrow: 52rem;
  --gutter: clamp(1.25rem, 0.7rem + 2.6vw, 3rem);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 26px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(6,48,46,.06), 0 2px 8px rgba(6,48,46,.05);
  --shadow:    0 8px 24px -10px rgba(6,48,46,.18), 0 2px 6px rgba(6,48,46,.06);
  --shadow-lg: 0 30px 70px -28px rgba(4,33,31,.42), 0 8px 24px -16px rgba(6,48,46,.2);
  --shadow-glow: 0 0 0 1px rgba(0,121,127,.18), 0 24px 60px -24px rgba(0,121,127,.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.25s;
  --dur-2: 0.5s;
  --dur-3: 0.8s;
  --dur-4: 1.1s;

  /* ---- Z-index ---- */
  --z-cursor: 9999;
  --z-preloader: 9000;
  --z-nav: 1000;
  --z-overlay: 1100;

  color-scheme: light;
}

/* Dark sections opt in via .theme-dark — flips semantic tokens */
.theme-dark {
  --bg: var(--teal-900);
  --surface: var(--teal-850);
  --text: var(--on-dark);
  --text-soft: var(--on-dark-soft);
  --text-mute: var(--on-dark-mute);
  --hairline: var(--line-dark);
  --accent: var(--teal-300);
  --accent-ink: var(--lime);
  color: var(--text);     /* re-apply so descendants inherit the light color */
  color-scheme: dark;
}

/* Product accent themes (scopes a signature accent) */
.accent-sonivera { --accent: var(--ember); --accent-soft: var(--ember-l); --accent-2: var(--amber); }
.accent-orflo    { --accent: var(--azure); --accent-soft: var(--azure-l); --accent-2: var(--teal-300); }