/* TalkKnow marketing site — design tokens (translated from the Flutter app's theme) */

:root {
  /* ── Color · Peach "you" ─────────────────────────────────── */
  --you-50:  #FFF4EE;
  --you-100: #FFE2D1;
  --you-200: #FBC4A7;
  --you-300: #F4A081;
  --you-400: #E8896F;
  --you-500: #D4715C;
  --you-600: #B95844;
  --you-700: #8E3F31;

  /* ── Color · Sage "them" ─────────────────────────────────── */
  --them-50:  #F1F6F3;
  --them-100: #DCE9E1;
  --them-200: #B8D1C3;
  --them-300: #93B8A5;
  --them-400: #6E9E86;
  --them-500: #4E8069;
  --them-600: #3C6451;
  --them-700: #2A4639;

  /* Overlap (you × them) — the "couple" tone */
  --overlap: #A98D79;

  /* Neutrals — warm paper */
  --paper-0:   #FFFDFA;
  --paper-50:  #FAF6EF;
  --paper-100: #F2ECE2;
  --paper-200: #E6DDCF;
  --paper-300: #CFC2AE;
  --ink-400:   #8A7E6C;
  --ink-600:   #5B4F3F;
  --ink-800:   #2E261E;
  --ink-900:   #1B1510;

  /* Semantic */
  --success: #6E9E86;
  --warn:    #D89A3E;
  --danger:  #C05A4A;
  --info:    #7A93B5;

  /* Pure white — used for text on colored buttons */
  --white: #FFFFFF;

  /* Streak gradient stops (the warm flame chip) */
  --streak-top:    #FFE8D0;
  --streak-bottom: #FFCBA0;

  /* Typography families (loaded from Google Fonts in index.html) */
  --font-sans:  'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

  /* Type scale (fluid) */
  --fs-tiny:    11px;
  --fs-small:   13px;
  --fs-body:    16px;
  --fs-lead:    18px;
  --fs-h3:      clamp(20px, 1.2vw + 16px, 24px);
  --fs-h2:      clamp(26px, 2vw + 18px, 36px);
  --fs-h1:      clamp(32px, 3vw + 20px, 52px);
  --fs-display: clamp(40px, 5vw + 22px, 84px);

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.55;

  /* Radii */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  40px;
  --r-pill: 9999px;

  /* Shadows — ink-shifted, warm */
  --shadow-sm: 0 1px 2px rgba(46,38,30,0.06), 0 1px 3px rgba(46,38,30,0.04);
  --shadow-md: 0 4px 12px rgba(46,38,30,0.06), 0 2px 4px rgba(46,38,30,0.04);
  --shadow-lg: 0 16px 40px rgba(46,38,30,0.10), 0 6px 14px rgba(46,38,30,0.06);
  --shadow-xl: 0 30px 60px rgba(46,38,30,0.14), 0 12px 24px rgba(46,38,30,0.08);

  /* Brand-tinted shadows for buttons */
  --shadow-you: 0 10px 24px -10px var(--you-400);
  --shadow-them: 0 10px 24px -10px var(--them-400);

  /* Motion */
  --ease-soft:   cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:   120ms;
  --dur-mid:    240ms;
  --dur-slow:   400ms;

  /* Layout */
  --content-max: 1180px;
  --gutter:      20px;
  --section-y:   88px;
}